我正在通过在线教程自学React。
所以这是一个关于如何使用React Router的基本示例:
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</Route>
</Router>
使用我的 App 组件:
class App extends React.Component {
render() {
return (
<div>
<ul>
<li><Link to="home">Home</Link></li>
<li><Link to="about">About</Link></li>
<li><Link to="contact">Contact</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
然而,我在使用IndexRoute时遇到了问题,因为它没有显示任何内容,所以我在npm上搜索了react-router-dom v4模块,但其中并没有IndexRoute。 相反,它使用了这个:
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
我应该如何在同一路径下渲染两个组件?
<Route path="/" component={App}>
中的App容器组件了吗? - The questionerlocation.search
字符串,以便为查询参数创建上下文。现在使用React Router v4,我该如何做到这一点? - CMCDragonkai