CODEWITHSUNDEEP
javascriptmeteorreact-routerreactjs
Hubert OG
Hubert OG

Reputation: 19544

Render multiple components in React Router

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?

Upvotes: 15

Views: 50974

Answers (12)

atazmin
atazmin

Reputation: 5677

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>

Upvotes: 0

IlyasDevs
IlyasDevs

Reputation: 53

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

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

Will work just fine.

Upvotes: 5

Oladipupo B&#249;nmi
Oladipupo B&#249;nmi

Reputation: 1

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>

Upvotes: 0

Bhuvan Kumar P
Bhuvan Kumar P

Reputation: 1

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

Upvotes: -1

kuly koti
kuly koti

Reputation: 21

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

This worked for me in the latest react router dom v6

Upvotes: 2

James F. Thomas
James F. Thomas

Reputation: 109

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

Upvotes: 0

Fellow Stranger
Fellow Stranger

Reputation: 34013

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

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

Upvotes: 17

syed mehdi
syed mehdi

Reputation: 21

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

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

Upvotes: 2

Kodali444
Kodali444

Reputation: 1443

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.

Upvotes: 2

Malinda
Malinda

Reputation: 584

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

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

`

Upvotes: 7

Snivio
Snivio

Reputation: 1864

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

Upvotes: 1

0xCrema.eth
0xCrema.eth

Reputation: 887

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

Upvotes: 17

Related Questions