Взаимодействовать с настройкой макета главного маршрутизатора с помощью вложенного синтаксиса

Question

Я пишу приложение с настройкой типа мастера/детали.

Я хочу два различных маршрута:

• /items предмета листинга страницы (все элементы)
• /items/item-slug товара подробно страницу (один элемент)

У меня есть следующие конфигурации:

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items"> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

Маршрут листинга работает, но маршрут маршрута e никогда не достигнуто (отображается страница с листингом вместо страницы с описанием).

Все работает, как ожидается, со следующей структурой:

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items" /> 
    <Route name="itemDetail" component={ItemDetail} path="items/:itemSlug" /> 
</Route> 

... но после прочтения react-router's documentation я был под впечатлением, что я мог бы использовать вложенность в мою пользу.

Есть ли какие-либо изменения, которые я могу сделать для первого фрагмента, так что маршрутизация работает так, как ожидалось, или второй фрагмент - правильный способ решения этой функции?

Answer 1

Предполагая, что вы не хотите, чтобы гнездо ItemDetail внутри ItemList, вы не можете вкладывать один внутри другого. Что бы я сделал, это примерно так:

<Route name="app" component={App} path="/"> 
    <IndexRedirect to="items" /> 
    <Route path="items"> 
    <IndexRoute name="itemList" component={ItemList} /> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

Answer 2

Попробуйте

<Route name="app" component={App} path="/"> 
    <IndexRoute component={ItemList} /> 
    <Route name="itemList" component={ItemList} path="items"> 
    <Route name="itemDetail" component={ItemDetail} path=":itemSlug" /> 
    </Route> 
</Route> 

Зачистка компонент items/ путь от маршрута itemDetail

Answer 3

В качестве маршрутов вложенности родительский компонент должен иметь предоставленные дочерние элементы.

Так ItemList компонента нужно добавить к функции визуализации {this.props.children}, чтобы сделать из ItemDetail

так

render(){return(<div>{this.props.children}</div>});}