在React Router中渲染多个组件

休伯特·奥格(Hubert OG)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Router不渲染组件

来自分类Dev

react-router中的嵌套组件未渲染

来自分类Dev

将多个React组件渲染到单个DOM元素中

来自分类Dev

网址更改但未渲染组件React Router

来自分类Dev

无法使用React Router渲染组件

来自分类Dev

通过 React-router 渲染子组件

来自分类Dev

React Router 组件渲染两次

来自分类Dev

React Router Switch 不渲染特定组件

来自分类Dev

React-router 不渲染组件

来自分类Dev

React Router 不渲染 Route 组件

来自分类Dev

在DOM中渲染React组件

来自分类Dev

在React中渲染组件实例

来自分类Dev

在 React 组件中渲染数学

来自分类Dev

用react-router进行React:通过替换元素中的内容来渲染组件

来自分类Dev

从条件语句渲染多个React组件

来自分类Dev

在React 0.12中动态渲染React组件

来自分类Dev

React如何使用react-router渲染app.js中的多个页面?

来自分类Dev

无法使用React Router和React Bootstrap渲染组件

来自分类Dev

React JS组件在Meteor中多次渲染

来自分类Dev

使用React组件渲染UI中的错误

来自分类Dev

如何避免在React中重新渲染组件?

来自分类Dev

在React Native中渲染特定组件

来自分类Dev

如何在React中渲染递归组件?

来自分类Dev

React功能组件中的重新渲染逻辑

来自分类Dev

在 html 页面中渲染 react 组件

来自分类Dev

在 React 中渲染动态子组件

来自分类Dev

在 React 中重新渲染 AppBar 组件

来自分类Dev

无法在 React 组件中渲染子项

来自分类Dev

当使用React Router在ReactJS中渲染参数组件时,如何避免不必要地重新渲染HOC组件