我正在学习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>
那么如何为1条路径渲染2个组件呢?
4 回答
UPDATE
react-router-4
已经改变,因为它不再有孩子了 . 但是,使用Route
组件,您可以渲染与路径匹配的任何内容 .请参阅此bin以试验它https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW .
这意味着如果你想要一个包装器,你可以在组件内部编写它 .
react-router&没有IndexRoute了
<Route exact path="/" component={Home}/>
===
<IndexRoute component={Home}/>
https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220
https://reacttraining.com/react-router/web/api/Switch
我不知道这是否有帮助,但这些是我使用的代码 .
文件结构:
SRC
-index.js
-app(文件夹)
--components(文件夹)
--- Header.js
--- Home.js
--- Root.js
--- user.js的
SRC /应用程序/ index.js
SRC /应用/组件/ Root.js
SRC /应用/组件/ Home.js
SRC /应用/组件/ user.js的
webpack.config.js