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

Question

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

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

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

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

Answer 1

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

В v4, чтобы обернуть компоненты, вы больше не кладете свои Routeвнутри другого Routeкладешь Routeнепосредственно внутри компонента.
IE: для обёртки вместо <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 компонент, так как он здесь не нужен. Посмотрите, когда это полезно здесь.

Answer 2

Вам нужно использовать компонент 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 не берут дочерние элементы, вместо этого вы должны использовать команду render.

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

Answer 3

Пытаться:

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

Answer 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 будет запускаться.

Answer 5

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

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