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:

Solution 1:

To passe multiple component you can do like this :

<Routepath="groups"components={{main:Groups, sidebar:GroupsSidebar}} /><Routepath="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:

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

Solution 3:

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

<Routepath='/some-path'render={props =><Fragment><Child1/><Child2/></Fragment>
} />

`

Baca Juga

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><Routepath="/"><ListView /><ListTopBar /></Route></Router>

JavaScript Controls