Render multiple components in React Router

Question

Я привык к макетам приложений с несколькими областями ввода, т. Е. Для области содержимого и заголовка верхнего бара. Я бы хотел добиться чего-то подобного в React Router. Например:

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

Оба дочерних компоненты должны получать тот же реквизит.

Как я могу подойти к этому?

Answer 1

Чтобы PASSE несколько компонент, вы можете сделать так:

<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} /> 
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}> 

ВИДЕТЬ документ здесь: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components

Answer 2

В v4, согласно docs, вы можете сделать несколько компонентов, как это:

<Route to='/some-path' render={props => 
    <div> 
    <FirstChild /> 
    <SecondChild /> 
    </div> 
} />