react router not rendering child component
Question
I'm learning react router and just cut off part of the Github's page and I'm using webpack and http-server to host my dev environement at http://localhost:8080 . When I go to to the routh path, I see my App component, but I don't see the Users component when I go to http://localhost:8080/users .
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var browserHistory = require('react-router').browserHistory;
var App = React.createClass({
render: function () {
return <div>app</div>
}
});
// etc.
var Users = React.createClass({
render: function () {
return (
<div>users</div>
)
}
})
document.addEventListener("DOMContentLoaded", function () {
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="users" component={Users}>
</Route>
</Route>
</Router>
), document.getElementById('main'));
});
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="main">
</div>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
2 answers
solution1
1 2016-03-12 03:46:17
I had exactly the same problem. So the thing is, users is a child of app . So whenever you render /users , first it renders app . But inside the app definition, you have to specify where you want to render its children with: {this.props.children} . So either add it to the definition:
var App = React.createClass({
render: function () {
return <div>{this.props.children}</div>
}
});
// etc.
Or bring users to the same level as app (I guess you don't want to do this):
document.addEventListener("DOMContentLoaded", function () {
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
</Route>
<Route path="/users" component={Users}>
</Route>
</Router>
), document.getElementById('main'));
});
For reference: https://github.com/reactjs/react-router#whats-it-look-like
solution2
0 2016-03-12 10:48:23
Try this then:
var React = require('react');
var ReactDOM = require('react-dom');
import { Router, Route, Link, browserHistory } from 'react-router'
var App = React.createClass({
render() {
return <div>
<ul>
<li><Link to="/users">/users</Link></li>
</ul>
<div>app</div>
<div>{this.props.children}</div>
</div>
}
})
var Users = React.createClass({
render() {
return (
<div>users</div>
)
}
})
document.addEventListener("DOMContentLoaded", function () {
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="users" component={Users}>
</Route>
</Route>
</Router>
), document.getElementById('main'));
});
What changed:
- I added
<div>{this.props.children}</div>where the child (in this case the Users) components get rendered - I added
<Link to="/users">/users</Link>.
Now if you click the link, it works like a charm!
Please note, that if you are using the webpack dev server, the browser URL is not gonna be the same as the URL that you are actually on. ) I had this issue, though you might have the same struggle). So instead of http://localhost:8000/webpack-dev-server/ open up http://localhost:8000/ (which redirects to http://localhost:8000/#/?_k=some_weird_hash ) and http://localhost:8000/#/users gonna work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.