Javascript 使用嵌套语法进行React路由器主详细信息设置

我正在编写一个应用程序，它有一个主/详细类型设置

我想要两条不同的路线：

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

。。。但读了这本书后，我觉得我可以利用筑巢来满足自己的需要

我是否可以对第一个代码段进行任何修改以使路由按预期工作，或者第二个代码段是解决此功能的正确方法？

试试看

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

路径组件

假设您不想将

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>

---

嵌套管线时，父组件需要渲染子组件

因此，在

ItemList

组件中，您需要添加到渲染函数

{this.props.children}

以渲染

itemdail

所以

render（）{return（{this.props.children}}）；}

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