使用嵌套语法反应路由器主细节设置

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

尝试

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

假设您不想将 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 3

当您嵌套路由时，父组件需要渲染子组件。

所以在ItemList组件中你需要添加渲染函数{this.props.children}来渲染出ItemDetail

所以

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

使用嵌套语法反应路由器主细节设置

React router master detail setup using nested syntax

javascript

reactjs

react-jsx

react-router