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>

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>

从itemDetail路径

中剥离items/路径组件

Answer 3

在嵌套路线时，父组件需要渲染子项。

因此，在ItemList组件中，您需要添加到渲染函数{this.props.children}以渲染ItemDetail

所以

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

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

3 个答案: