在 React Router 中渲染多个组件

Question

我习惯于应用具有多个收益区域的布局，即内容区域和顶部栏标题。 我想在 React Router 中实现类似的东西。 例如：

<Router>
  <Route path="/" component = { AppLayout }>
    <Route path="list"
           component = { ListView }
           topBarComponent = { ListTopBar }/>
  </Route>
</Router>

应用布局：

<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

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

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

Answer 3

您可以使用 Fragments，而不是使用 div。 `

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

`

Answer 4

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

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

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

Answer 5

//这是渲染多个组件的最简单方法，它适用于我

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

Answer 6

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

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

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 中对我有用

Answer 9

对于 v6，您使用 Routes 而不是 Switch 来渲染组件。 这有效：

<Router>
<Routes>
<Route path='/' element={<><Child1/> <Child2/></>} />
</Routes>
</Router>

但对于 v5，这有效：

<Router>
<Switch>
<Route path="/">
   <Child1/>
   <Child2/> 
</Route>

Answer 10

你也可以在最新版本的 React-router-dom 中使用 Array；

 <Route path="groups" element={[<Component1/>,<Component2/>]} />

会工作得很好。

Answer 11

这似乎对我有用，我只需要在主页（“/”）下添加 canvas animation 组件作为背景：

import Page from 'pages/Page';
import Blog from 'pages/Blog';
import Post from 'pages/Post';
import Category from 'pages/Category';
import CanvasParticles from 'components/canvas/CanvasParticles';

...

<Routes>
  {['/', '/:slug'].map((path, index) => {
  return path === '/' ? (
   <Route
    exact
    path={path}
    element={[<CanvasParticles />, <Page />]}
    key={index}
   />
  ):(
   <Route path={path} element={<Page />} key={index} />
  );
 })}
 <Route exact path="/blog" element={<Blog />}></Route>
 <Route path="/blog/:slug" element={<Post />}></Route>
 <Route path="/category/:slug" element={<Category />}></Route>
</Routes>

Answer 12

单击此您可以查看图像 v6 功能：这是渲染多个组件的最简单方法，它适用于我

主要概念是你应该用元素 <Route path="/" element={<> </>} 包装或用 Fragment <Route path="/" element={ } 包装