Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 544
Hubert OG Avatar asked May 20 '16 09:05

Hubert OG


1 Answers

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

<Route path='/some-path' render={() =>
  <Fragment>
    <FirstChild />
    <SecondChild />
  </Fragment>
} />
like image 150
Fellow Stranger Avatar answered Oct 01 '22 07:10

Fellow Stranger