Why is it that when I supply the routes within the router all is good but when I compose the routes like below I get a
warning.js:36 Warning: Failed prop type: Invalid prop
children supplied to
Router . in Router (at index.js:62) in Root (at index.js:70)
. in Router (at index.js:62) in Root (at index.js:70)
and a
browser.js:49 Warning: [react-router] Location "/contact" did not match any routes
import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
class Navigation extends Component {
render() {
return (
<div>
<ul>
<li><Link to='/'>Main</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
</div>
);
}
};
class Contact extends Component {
render() {
return <div>Contact</div>;
}
}
class About extends Component {
render() {
return ( <div>About</div> );
}
}
class Home extends Component {
render() {
return <div>Home</div>;
}
}
class App extends Component {
render() {
return (
<div>
<h1>App</h1>
<Navigation />
{this.props.children}
</div>
);
}
}
const routes = () => (
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path='about' component={About} />
<Route path='contact' component={Contact} />
</Route>
)
export default class Root extends Component {
render() {
return (
<Router history={browserHistory}>
{routes}
</Router>
);
}
}
ReactDOM.render(
<Root />,
document.getElementById('root')
)
I've tried just about all variations. Is it possible to compose routes? Any help appreciated.
export default class Root extends Component { render() { return ( <Router history={browserHistory}> {routes()} </Router> ); } }
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.