在 React Router 中渲染多个组件 [英] Render multiple components in React Router

问题描述

我习惯于具有多个产量区域的应用程序布局，即内容区域和顶部栏标题.我想在 React Router 中实现类似的功能.例如:

<路由器><Route path="/" component = { AppLayout }><路由路径=列表"组件 = { 列表视图 }topBarComponent = { ListTopBar }/></路线></路由器>

应用布局:

<div className="appLayout topBar">{ -- 在此处显示 ListTopBar -- }
<div className="appLayout 内容">{ -- 在此处显示 ListView -- }

两个子组件应该接收相同的 props.

我该如何解决这个问题?

解决方案

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

<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

I'm used to application layouts with multiple yield areas, i.e. for content area and for top bar title. I'd like to achieve something similar in React Router. For example:

<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>

Both child components should receive the same props.

How can I approach this?

解决方案

To passe multiple component you can do like this :

<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>

See the doc here : https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components

这篇关于在 React Router 中渲染多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！