我正在通过在线教程自己学习 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>
使用我的应用程序组件:
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>
那么如何为 1 个路径渲染 2 个组件呢?
UPDATE
react-router-4
发生了变化,因为它不再有孩子。然而,随着Route
您可以渲染与路径匹配的任何内容。
<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/>
// All 3 components below would be rendered when in a homepage
<Route exact path="/" component={Home}/>
<Route exact path="/" component={About}/>
<Route exact path="/" component={Contact}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
这意味着如果您想要一个包装器,您可以将其写入组件内。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)