javascript - 使用嵌套语法 react 路由器主详细信息设置

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>

列表路由有效，但从未到达项目路由(显示列表页面而不是项目页面)。

一切都按预期进行，结构如下:

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