在React Router中渲染多个组件

  • Z时代
  • 2024-01-10
  • 分类：问答

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

以上是 在React Router中渲染多个组件 的全部内容， 来源链接： utcz.com/qa/411042.html

回到顶部