My react router is not opening my news and photos pages. When they open it's supposed to display the header file on each pages. When I try to open the news page (localhost:8080/news) I get a 404 page not found error message in my node command prompt.
My GitHub repository
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Header = require('./components/Header.jsx');
var News = require('./components/News.jsx');
var Photos = require('./components/Photos.jsx');
var Routes = (
<Router history={browserHistory}>
<Route path="/" component={Header}>
<Route path="news" component={News} />
<Route path="photos" component={Photos} />
</Route>
</Router>
);
module.exports = Routes;
Here's a quick answer of what you can do to your main.js file. There's probably better ways you could structure your code. I would suggest taking a closer look at more React examples around the Internet.
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var Routes = require('./Routes.jsx');
var Header = require('./components/Header.jsx');
var Main = React.createClass({
render: function(){
return(
<div>
<Header />
<Routes />
</div>
);
}
});
ReactDOM.render(<Main />, document.getElementById('switch'));
I noticed your code seems to have a lot of duplicate files for a .js and a .jsx. You know you only need one or the other, right?
I found out I was using react-router v3.0 so I uninstalled it and installed the 2.8.1 version. It still displays the # (ie. localhost/#/news) but it's close enough. Thanks for your help.
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var useRouterHistory = ReactRouter.useRouterHistory;
var createHashHistory = require('react-router/node_modules/history/lib/createHashHistory');
var appHistory = useRouterHistory(createHashHistory)({
queryKey:false
});
var Header = require('./components/Header.jsx');
var News = require('./components/News.jsx');
var Photos = require('./components/Photos.jsx');
var Routes = (
<Router history={appHistory}>
<Route path="/" component={Header}>
<Route path="/news" component={News} />
<Route path="/photos" component={Photos} />
</Route>
</Router>
);
module.exports = Routes;
Related
I'm tying to convert old react router code.
I cannot find a place that explains how to update old react router code.
How the code below can be translated using "react-router": "^4.2.0" ?
Sample code from app-client.js :
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var routes = (
<Route handler={APP}>
<DefaultRoute handler={Audience} />
<Route name="speaker" path="speaker" handler={Speaker}></Route>
<Route name="board" path="board" handler={Board}></Route>
</Route>
);
Router.run(routes, function(handler) {
ReactDOM.render(<APP />, document.getElementById('react-container'));
});
Sample code from APP.js :
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var APP = createReactClass({
render() {
return(
<div>
<Header title={this.state.title} status={this.state.status} />
<RouteHandler />
</div>
);
}
});
module.exports = APP;
Use your search skills:) duck duck go! "react Router Migration"
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md
https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
First two:)
Using React-Router in ES5, I have the below code
var React = require('react');
var Render = require('react-dom').render;
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = Router.hashHistory;
var browserHistory = Router.browserHistory;
var About = require('./components/about/aboutPage');
var routes = (
<Router>
<Route path="/" handler={App}>
<Route path="about" handler={About}/>
</Route>
</Router>
);
module.exports = routes;
This is rendered in {main.j} as
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./routes');
ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'));
However, in the console, am getting this warning and nothing loads up:
bundle.js:1845 Warning: [react-router] `Router` no longer defaults the history prop to hash history. Please use the `hashHistory` singleton instead
I have clearly passed {hashHistory} in the code above, but still it keeps on complaining.
Any hints on what could be going wrong?
Thanks
No you didn't.You have just defined it and not used it. You have to pass history={hashHistory} in the router Tag.
var React = require('react');
var Render = require('react-dom').render;
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = Router.hashHistory;
var browserHistory = Router.browserHistory;
var About = require('./components/about/aboutPage');
var routes = (
<Router history={hashHistory}>
<Route path="/" handler={App}>
<Route path="about" handler={About}/>
</Route>
</Router>
);
module.exports = routes;
P.S. react-router 2.8.0 requires react v15.3.0 and above. Visit the
following link.
https://www.versioneye.com/nodejs/react-router/2.8.0
If you dont have this, I would suggest you use react-router v2.0.0 or update you react to the required version.
Found the reason - It was an issue with my rendering code
ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'));
as {routes} already contained {}, there was no need to specify it again whilst rendering. Because of this, ofcourse, {history} prop was missing in the render code. So, I just changed the render code to:
ReactDOM.render(routes, document.getElementById('app'));
and it works perfectly fine!
Thanks
I'm working with react router, but I have a problem when I try to reload some views. This is my code
Router file
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
/*Windows*/
var Index = require('./components/views/Index.jsx');
var RegisterForm = require('./components/views/RegisterForm.jsx');
var Base = require('./components/Base.jsx');
var Intro = require('./components/views/Intro.jsx');
var ProductsView = require('./components/views/ProductsView.jsx');
var SuccessfullyRegistered = require('./components/views/SuccessfullyRegistered.jsx');
var Cart = require('./components/views/Cart.jsx');
var EditAccount = require('./components/views/EditAccount.jsx');
var BuyStep01 = require('./components/views/BuyStep01.jsx');
var NotFoundPage = require('./components/views/NotFoundPage.jsx');
var browserHistory = ReactRouter.browserHistory;
var hashHistory = ReactRouter.hashHistory;
var Routes = (
<Router history={browserHistory}>
<Route path="/" component={Base}>
<IndexRoute component={Intro}/>
<Route path="index" component={Index}/>
<Route path="register" component={RegisterForm}/>
<Route path="success" component={SuccessfullyRegistered}/>
<Route path="product" component={ProductsView}/>
<Route path="cart" component={Cart}/>
<Route path="editaccount" component={EditAccount}/>
<Route path="step01" component={BuyStep01}/>
<Route path="*" component={NotFoundPage}/>
</Route>
</Router>
);
module.exports = Routes;
My base file
var React = require('react');
var Footer = require('../components/footer/Footer.jsx');
var SocialNetsBox = require('../components/socialNets/SocialNetsBox.jsx');
var Base = React.createClass({
render: function(){
var style={
overflowX: 'hidden'
};
var styleHidden={
overflow: 'hidden'
};
return(
<div className="father">
<SocialNetsBox/>
<div className="container-fluid" style={style}>
{this.props.children}
</div>
<Footer/>
</div>
);
}
});
module.exports = Base;
and my mainfile.
var React = require('react');
var ReactDOM = require('react-dom');
var Routes = require('./Routes.jsx');
ReactDOM.render(Routes, document.getElementById('main'));
The problem is that when I press F5 or refresh icon in browser, I get a blank page without any error in console. I don't know what's happening. I'm using http-server
This seems to be a common case of RFP rabbitholing. You just need to reset the cache packet server ratio and everything should work after that.
I am getting this error :-
Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined
in this code. I used Router for navigation but not working. I imported a file called Home.jsx
var React = require('react')
var ReactDOM = require('react-dom')
var Router = require('react-router').Router
var Route= Router.Route
var IndexRoute = Router.IndexRoute
var App = React.createClass({
render() {
return (
<div>
<p>App</p>
<ul>
<li>About</li>
</ul>
</div>
)
}
})
var About = require('./components/Home')
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<IndexRoute path="/about" component={About} />
</Route>
</Router>
), document.body)
and Home.jsx
var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');
var Home = React.createClass({
render:function() {
return (
<RaisedButton label="Default" />
);
},
});
module.exports = Home;
There are a few things which you are doing wrong here. I'm assuming you are using React Router 1.0 (because of use of IndexRoute).
In version 1.0 Router component is a property of the top-level module, so this is how you would do your imports:
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
I think you also not fully understand what IndexRoute is, have a look in the docs for the clarification. But the tldr; is that the IndexRoute does not take the path argument.
Another thing is that to mount your routes components somewhere you need to specify where, and you can do it with use of {this.props.children}. So your could could look like:
var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var App = React.createClass({
render() {
return (
<div>
<p>App</p>
{this.props.children}
</div>
)
}
})
var About = require('./components/Home')
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<IndexRoute component={About} />
</Route>
</Router>
), document.body)
Please have a look at the Introduction docs so you will better understand how to use react router in your app.
I am trying to figure out React Router, but when I load the page I am only seeing an empty script tag being rendered. I must be doing something wrong. I have followed the guide on the react router docs page.
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var About = require('./About');
var Inbox = require('./Inbox');
var routes = (
<Route handler={App}>
<Route path="about" handler={About}/>
<Route path="inbox" handler={Inbox}/>
</Route>
);
var App = React.createClass({
render () {
return (
<div>
<h1>App</h1>
<RouteHandler/>
</div>
)
}
});
Router.run(routes, Router.HashLocation, (Root) => {
React.render(<Root/>, document.getElementById('app'));
});
I figured it out. I needed to put my routes variable below App like so:
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var About = require('./About');
var Inbox = require('./Inbox');
var App = React.createClass({
render () {
return (
<div>
<h1>App</h1>
<RouteHandler/>
</div>
)
}
});
var routes = (
<Route handler={App}>
<Route path="about" handler={About}/>
<Route path="inbox" handler={Inbox}/>
</Route>
);
Router.run(routes, Router.HashLocation, (Root) => {
React.render(<Root/>, document.getElementById('app'));
});