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

Question

Моя цель состоит в том, чтобы иметь http://mydomain/route1 render React component 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 вместо этого.

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

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

Answer 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-адресами, и наоборот.

Answer 2

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

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

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

Answer 3

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