为什么当我在路由器内提供路由时一切都很好,但是当我像下面这样编写路由时我得到一个
warning.js:36 警告:失败的 prop 类型:无效的 prop
children 提供给
Router。
在路由器中(位于index.js:62)
在根目录中(位于index.js:70)
和一个
browser.js:49 警告:[react-router] 位置“/contact”与任何路由都不匹配
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')
)
我已经尝试了几乎所有的变体。是否可以组合路线?任何 帮助表示赞赏。
最佳答案
export default class Root extends Component {
render() {
return (
<Router history={browserHistory}>
{routes()}
</Router>
);
}
}
关于reactjs - React Router - 编写路由时向 `children` 提供的无效 prop `Router`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40310323/