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

两个 child 组件应该接收相同的道具。

我该如何解决这个问题？

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

在 v4 中，根据 docs，您可以像这样渲染多个组件：

<Route path='/some-path' render={() =>
  <Fragment>
    <FirstChild />
    <SecondChild />
  </Fragment>
} />

Answer 3

另一个方法在路由的渲染方法中，可以使用react.createElement

创建多个传递的组件

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

Answer 4

您可以使用片段来代替 div。 `

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

`

Answer 5

要渲染多个组件，您可以这样做：

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

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

Answer 6

//这是渲染多个组件的最简单方法，对我来说很有效

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

Answer 7

对我有用的是将多个组件包装在 <Fragment> 或 <div> 中作为父元素。


  return (
    < Router>
      <div className="App" >
        <Routes>
          <Route path='/'
            element={
              <Fragment>
                  < NavBar />
                  < NewsLetterCard />
                  < TestimonialsCard />
                  < ServicesCard />
                  < ContactsCard />
                  < Footer />
              </Fragment>
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

Answer 8

 <Route path='/' element={<><Header /> <Home /></>} />

这在最新的反应路由器 dom v6

中对我有用

在 React Router 中渲染多个组件

Render multiple components in React Router

javascript

meteor

reactjs

react-jsx

react-router