在React Router中渲染多个组件

小编典典

在React Router中渲染多个组件

reactjs

我习惯于具有多个产量区域的应用程序布局，即用于内容区域和顶部栏标题。我想在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>

两个子组件都应接收相同的道具。

我该如何处理？

阅读 487

2020-07-22

共1个答案

小编典典

要传递多个组件，您可以这样：

<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

2020-07-22