我习惯于具有多个产量区域的应用程序布局,即用于内容区域和顶部栏标题。我想在React Router中实现类似的功能。例如:
<Router>
<Route path="/" component = { AppLayout }>
<Route path="list"
component = { ListView }
topBarComponent = { ListTopBar }/>
</Route>
</Router>
AppLayout:
<div className="appLayout box">
<div className="appLayout topBar">
{ -- display ListTopBar here -- }
</div>
<div className="appLayout content">
{ -- display ListView here -- }
</div>
</div>
两个子组件都应接收相同的道具。
我该如何处理?
要传递多个组件,您可以这样做:
<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
在此处查看文档:https : //github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句