score:1
var baseview = react.createclass({
pathtocomponent: function(){
var paths = {
'home': contenthome,
'login': contentlogin
};
return paths[path] || content404
},
render: function() {
var contentcomponent = this.pathtocomponent(this.props.path);
return (
<div id="base" onclick={this.onclick}>
<header />
<contentcomponent />
</div>
);
},
}); // end baseview
return baseview;
});
score:2
don't hold a reference to a component like you are. if needed use refs or better yet, just render the component in the callback. react will check if it needs to update the dom.
require(
[
"jsx!app/view/base",
"react",
"backbone"
],
function (baseview, react, backbone) {
"use strict";
var router = backbone.router.extend({
routes: {
"": "home",
"test": "test",
"login": "login",
"*error": "404"
}
}).on('route', function(action) {
react.rendercomponent(
<baseview router={router} path={action} />,
document.getelementbyid("page")
);
});
backbone.history.start({pushstate: true});
}
);
edit:
since the logic in baseview
is very coupeld to the logic in router
, it makes most sense to keep them in the same file.
var baseview = react.createclass({
render: function() {
return (
<div id="base" onclick={this.onclick}>
<header />
{this.props.children}
</div>
);
},
onclick: function(event) {
if (event.target.tagname.tolowercase() !== "a") return;
if (event.target.classname !== "main") return;
event.preventdefault();
this.props.router.navigate(event.target.pathname, {trigger: true});
}
});
app/router:
var router = backbone.router.extend({
routes: {
"": "home",
"test": "test",
"login": "login",
"*error": "404"
}
}).on('route', function(action) {
var pathmapping = {
"home": contenthome,
"test": contenttest,
"login": contentlogin
};
var content = pathmapping[action] || content404;
react.rendercomponent(
<baseview router={router}>
<content />
</baseview>,
document.getelementbyid("page")
);
});
backbone.history.start({pushstate: true});
Source: stackoverflow.com
Related Query
- structure of a Backbone and React single page app
- Enable single page app react hot reload webpack
- Serving a static html page from a single page react app with react router
- How to point all node js microservices in single port locally and consume it in react app
- Keeping Google login persistent on reloading single page react app
- How to I prevent user from accessing the page of my react app directly by entering the URL, and redirect them back to login page
- Redux, React for single page application login and logout
- how to get two kinds of components structure in single react app
- Create React App PWA ERROR: Does not register a service worker that controls page and start_url
- styles.css is not being applied to only one page in react and node.js app
- How do I deploy an react app to azure and change the default page
- Best way to proceed to have both public and private routes on a single web app using Keycloak and React router?
- Apache structure and config for React app with self hosted headless CMS
- React Route does not work - Single page app
- How to perform a single sign on between Django app and React JS app?
- Multiple react apps in a single page and keep them in sync
- Create react app served with nginx and oauth gives me refresh page issue
- React app compiles successfully and works but after reloading the page in the browser I get a TypeError var.filter is not a function
- Social sharing and head tags of a specific page in a React app
- How to merge React App and Express App to deploy on single project?
- Unable to make api calls from React Single Page app
- React Single Page app with browserHistory possible?
- Blank page after running build on the react app and errors on the console
- Unable to access subroutes and home page in yarn build React app
- Next.js / React single page app needs urls for each item
- Adding underline to current page section in single page react app with Chakra.ui
- Can't render out single page data from list in a react application using router and WordPress API
- React - animate mount and unmount of a single component
- "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>
- What is the difference between NextJs and Create React App
More Query from same tag
- React dynamic route for webpage
- trying to fetch data with fetch and promise, doesnt work (react)
- How to handle Ajax in pure function components in react?
- How to remove set of keys from a nested objects?
- How can I center the title in Appbar.Header in react-native-paper?
- Expected indentation of 4 spaces but found 0
- TypeError: Cannot read property 'state' of undefined. Updated React
- Access variable from script inside React component
- ReactJS router links not working when clicking them
- .filter is not a function. Trying to search through names from API data
- Reactjs - create factory, passing props into component
- Constructor props equivalent in React Hooks for history push
- React: How do I loop through an object, that is a list?
- onCLick event on mapped array's element
- componentWillMount fails to set the state
- Ant Design how to handle Form.List accessing values from underlaying data structure?
- React hook useContext re-render component
- How do you check a checkbox in react-testing-library?
- Using npm package in Meteor via cosmos:browserify
- How to load dynamically data from localStorage in React JS?
- useState to update an object property
- How to map deep JSON data dynamically using React
- Ignore CSS in modal
- Using React and Redux, how would you clear an input field after a successful redux-thunk completion?
- i have a submit button that i want to redirect to another router link when i click on submit button
- How to return a value from form by concatenating with a string?
- Font Awesome icons not rendering
- filtering object and modify properties
- TextField DeSelected onChange - React
- React component disappears in a blink when using useEffect()