我正在通过在线教程来学习自己。
因此,这是有关使用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>
那么如何为1个路径渲染2个组件?
UPDATE react-router-4已更改,因为它不再有子级。但是,使用该Route组件,您可以呈现与路径匹配的任何内容。
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>
请参阅此bin进行实验https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW。
这意味着,如果需要包装器,可以将其写入组件内部。