使用嵌套语法反应路由器主详细信息设置答案

【问题标题】：React router master detail setup using nested syntax使用嵌套语法反应路由器主详细信息设置
【发布时间】：2016-08-26 09:48:30
【问题描述】：

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

我想要两条不同的路线：

/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 之后，我的印象是我可以使用嵌套来为我所用。

我可以对第一个 sn-p 进行任何修改以使路由按预期工作，还是第二个 sn-p 是解决此功能的正确方法？

【问题讨论】：

标签： javascript reactjs react-router react-jsx

【解决方案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>

【讨论】：

【解决方案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/ 路径组件

【讨论】：

【解决方案3】：

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

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

所以

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

【讨论】：