在React Router中渲染多个组件

Question

我习惯了具有多个屈服区域的应用程序布局,即内容区域和顶栏标题.我想在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>

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

我怎么处理这个？

Answer 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

Answer 2

您可以使用 Fragments，而不是使用 div。`

<Route path='/some-path' render={props =>
  <Fragment>
    <Child 1/>
    <Child 2/>
  </Fragment>
} />

`

Answer 3

根据文档，在v4中，您可以渲染多个组件，如下所示：

<Route path='/some-path' render={props =>
  <div>
    <FirstChild />
    <SecondChild />
  </div>
} />

Answer 4

您还可以在最新版本的 React-router-dom 中使用 Array；

<Route path="groups" element={[<Component1/>,<Component2/>]} />

会工作得很好。