React router - Вложенные маршруты не работают

Моя цель состоит в том, чтобы http://mydomain/route1 визуализировать компонент React Component1 и http://mydomain/route2 render Component2. Итак, я считал естественным писать маршруты следующим образом:

    <Route name="route1" handler={Component1}>
        <Route name="route2" handler={Component2} />
    </Route>

    <DefaultRoute name="home" handler={Home} />
  </Route>

http://mydomain/route1 работает как ожидалось, но http://mydomain/route2 вместо этого отображает Component1.

Затем я прочитал этот вопрос и изменил маршруты следующим образом:

    <Route name="route1" path="route1" handler={Component1} />
    <Route name="route2" path="route1/route2" handler={Component2} />

    <DefaultRoute name="home" handler={Home} />
  </Route>

Оба http://mydomain/route2 и http://mydomain/route2 работайте так, как ожидалось. Однако я не понимаю, почему первый не работает, пока он выглядит более логичным и опрятным для меня.

Вложенный синтаксис работает для "/" и "route1", так почему бы не "route1" и "route2"?

Ответ 1

Проблема в том, что во вложенных маршрутах маршрутизатор попытается установить все компоненты, соответствующие иерархии. Это лучше всего использовать, когда вы хотите встраивать компоненты друг в друга... но если вы хотите, чтобы два отдельных маршрута соответствовали различным компонентам, они должны быть их собственными маршрутами.

<Route handler={App}>
  <Route path="route1" handler={Component1} />
  <Route path="/route1/route2" handler={Component2} />
  <DefaultRoute name="home" handler={Home} />
</Route>

Component2 будет монтироваться (внутри App), если URL-адрес /route1/route2.

Если вы хотите вложить компоненты, вам нужно добавить <RouteHandler/> в Component1, чтобы он отображал Component2 внутри него.

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

Ответ 2

При использовании иерархических маршрутов, где есть навигация, требующая правильных активных состояний, лучший подход состоит в том, чтобы сделать следующее (используя синтаксис для RR2):

<Route path="route1">
    <IndexRoute component={Component1}/>
    <Route path="route2" component={Component2} />
 </Route>

Таким образом, когда URL /route1/route2, любые навигационные ссылки для route1 будут правильно иметь активное состояние.

Ответ 3

Я решал аналогичную проблему (Component2 не отображался), а вложенные маршруты не работали, потому что я забыл сделать {this.props.children} в Component1