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

在第4版中，根据docs，您可以渲染多个组件：

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

Answer 3

//这是呈现多个组件的最简单方法，对我有用

<Router>
  <Route path="/">
       <ListView />
       <ListTopBar /> 
  </Route>
</Router>

Answer 4

您可以使用Fragments来代替div。 `

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

`

Answer 5

路由的render方法中的另一个方法可以使用react.createElement创建多个传递的组件

<Route render ={(props)=>React.createElement(Component1, {...props}},
                     React.createElement(Component2, {...props}}/>

Answer 6

要渲染多个组件，您可以执行以下操作：

<Route 
    path="/EditEmployee/:id"  
    render={(props) => 
        <div>
            <NavMenu />
            <EditEmployee {...props} />
        </div> 
    } 
/>

这里我正在将参数传递给特定的组件。

在React Router中渲染多个组件

6 个答案: