Вложенные маршруты в React Router v4

Ответ CESCO сначала отображает компонент AppShell, затем один из компонентов внутри Switch. Но эти компоненты НЕ будут отображаться внутри AppShell, они НЕ будут дочерними элементами AppShell.

В версии 4, чтобы обернуть компоненты, которые вы больше не кладете Route внутри другого Route, вы помещаете свои Route непосредственно внутрь компонента.
Т.е.: для оболочки вместо <Route component={Layout}> вы напрямую используете <Layout>.

Полный код:

  <Router>
    <Layout>
      <Route path='/abc' component={ABC} />
      <Route path='/xyz' component={XYZ} />
    </Layout>
  </Router>

Это изменение, вероятно, объясняется идеей сделать React Router v4 чистым React, чтобы вы использовали только элементы React, как и любой другой элемент React.

РЕДАКТИРОВАТЬ: я удалил компонент Switch, так как он здесь бесполезен. Узнайте, когда это будет полезно здесь.

Вам нужно использовать компонент переключения для вложения, чтобы работать хорошо. Также см. этот вопрос

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

Компоненты версии 4 не берут дочерние элементы, вместо этого вы должны использовать свойство рендеринга.

<Router>
    <Route render={(props)=>{
      return <div>Whatever</div>}>
    </Route>
  </Router>

Пытаться:

<Router>
    <Layout>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
    </Layout>
</Router>

Если вы не хотите, чтобы Layout запускался при загрузке. Используйте этот метод:

<div className="container">
    <Route path="/main" component={ChatList}/>
    <Switch>
        <Route exact path="/" component={Start} />
        <Route path="/main/single" component={SingleChat} />
        <Route path="/main/group" component={GroupChat} />
        <Route path="/login" component={Login} />
    </Switch>
</div>

Всякий раз, когда история изменяется, componentWillReceiveProps в ChatList будет запущен.

Вы также можете попробовать это:

<Route exact path="/Home"
                 render={props=>(
                                 <div>
                                      <Layout/>
                                      <Archive/>
                                </div>
                       )} 
    />