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

Я пытаюсь настроить некоторые вложенные маршруты, чтобы добавить общий макет. Проверьте код:

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

Пока это работает отлично, я все равно получаю предупреждение:

Предупреждение: вам не следует использовать компонент <Route> и < Route children > В то же самое маршрут; будут проигнорированы

Ответ 1

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

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

Полный код:

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

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

EDIT: я удалил компонент Switch, поскольку он здесь не используется. Посмотрите, когда это полезно здесь.

Ответ 2

Вам нужно использовать компонент switch для вложения, чтобы работать хорошо. Кроме того, см. question

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

Ответ 3

Try:

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

Ответ 4

Если вы не хотите, чтобы 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 будет работать.

Ответ 5

Вы также можете попробовать следующее:

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