Render multiple components in React Router

Question

I'm used to application layouts with multiple yield areas, ie for content area and for top bar title. I'd like to achieve something similar in React Router. For example:

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

Both child components should receive the same props.

How can I approach this?

Answer 1

To passe multiple component you can do like this :

<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>

See the doc here : https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components

Answer 2

In v4, according to the docs , you can render multiple components like this:

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

Answer 3

Instead of using div's you can use Fragments. `

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

`

Answer 4

To render multiple components you can do this:

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

Here I'm passing parameter to specific conponent.

Answer 5

//this is the simplest method to render multiple components and it works for me

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

Answer 6

Another method is within the render method of route multiple passed components can be created using react.createElement

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

Answer 7

What worked for me was to wrap the multiple components in a <Fragment> or a <div> as a parent element.

  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

For v6, where you are using Routes instead of Switch to render your components. This works:

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

But for v5, this works:

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

Answer 10

You can also use Array in latest versions of React-router-dom;

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

Will work just fine.

Answer 11

This seem to work for me, I needed to add canvas animation component as background under homepage ("/") only:

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

click on this you can view a image v6 feature : this is the simplest method to render multiple components and it works for me

Main Concept is to you should wrap with element <Route path="/" element={<> </>} or wrap with in Fragment <Route path="/" element={ }