Render multiple components in React Router

Question

I'm used to application layouts with multiple yield areas, i.e. 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?

Hurlyburly

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

Phagy

Link link is broken. It should be: github.com/ReactTraining/react-router/blob/v3/docs/… – Salenasalene

Answer 2

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

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

Lawlor

Shouldn't the prop for this be path='/popular' instead of to='/popular' ? – Goodtempered

Answer 3

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

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

`

Myna

Answer 4

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

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

Will work just fine.

Bertberta

Answer 5

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.

Unsex

Answer 6

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

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

Charmion

Answer 7

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

This worked for me in the latest react router dom v6

British

Answer 8

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

Wessels

Answer 9

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>
  );
}

Fuddyduddy

Answer 10

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>

Micelle

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>

Brookhouse

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={ }

Garth

meta.#286051 – Buffoon

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Wrecker