Render multiple components in React Router

javascript meteor reactjs react-router react-jsx

35,423

Solution 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

Solution 2

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

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

Solution 3

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

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

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

Solution 5

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

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

View more solutions

35,423

Author by

Hubert OG

Freelancer, geek, saxophone player.

Updated on March 28, 2022

Comments

Hubert OG about 2 years

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?

Sebastian Schütze about 7 years

Link link is broken. It should be: github.com/ReactTraining/react-router/blob/v3/docs/…
Eric Bishard over 5 years

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