react-router 中的嵌套路由答案

【问题标题】：Nested routes in react-routerreact-router 中的嵌套路由
【发布时间】：2015-02-21 03:31:49
【问题描述】：

我正在 React-Router 中设置一些嵌套路由（我正在使用 v0.11.6），但每当我尝试访问其中一个嵌套路由时，它都会触发父路由。

我的路线如下所示：

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard}>
        <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
   </Route>

    <NotFoundRoute handler={NotFound} />
</Route>

如果我将路线折叠起来，它看起来像：

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard} />
    <Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />

    <NotFoundRoute handler={NotFound} />
</Route>

它工作正常。我嵌套的原因是因为我将在“仪表板”下有多个孩子，并希望它们在 URL 中都以 dashboard 为前缀。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

配置不是关于路由（尽管有名称），而是更多关于由路径驱动的布局。

因此，使用此配置：

<Route name="dashboard" handler={availableRoutes.Dashboard}>
  <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>

这是说dashboard-child 将嵌入到dashboard 中。它的工作原理是，如果dashboard 有这样的东西：

<div><h1>Dashboard</h1><RouteHandler /></div>

而dashboard-child 有：

<h2>I'm a child of dashboard.</h2>

那么对于路径dashboard，由于没有匹配路径，所以没有嵌入的孩子，导致：

<div><h1>Dashboard</h1></div>

对于路径dashboard/dashboard-child，嵌入的子节点有一个匹配的路径，结果如下：

<div><h1>Dashboard</h1><h2>I'm a child of dashboard.</h2></div>

【讨论】：

@bjfletcher，您能否澄清一下，如果我有这样的示例，路线和布局应该如何：深度布局 3 级，当我在 3 级路由器之间切换时，应该使用 2 级父组件不会重新渲染。
@MihailZheludev 绝对是。这是查找的简单方法：修改该父组件中的一些文本。然后玩第三级组件。修改应该保留而不是重新渲染。
@bjfletcher，我明白了，但我遇到了如上所述的问题。我有 2 个级别，并且从根元素到最后一个子元素的所有应用程序都在每次转换到子元素时呈现
@MihailZheludev 这不应该发生。我建议将您的应用程序代码与来自 react-router 的类似示例进行比较，尝试查看导致“整页重新加载”的违规代码是什么。分而治之的应用程序尽可能与示例相似，并且有问题的代码有望变得明显。 HTH。
@bjfletcher, there is that issue we talked about

【解决方案2】：

这是@bjfletcher 对 react-router 1.0.0 的回答的更新。如upgrade guide中所述：

RouteHandler 不见了。 Router 现在会根据活动路由自动填充您的组件的 this.props.children。

所以不是

<div><h1>Dashboard</h1><RouteHandler /></div>

你会使用：

<div><h1>Dashboard</h1>{this.props.children}</div>

【讨论】：

如果您只想在 url 中嵌套路由，但希望 {this.props.children} 是唯一的组件？
我找到的一个解决方案是在父组件中，在渲染函数中使用代码sn-p控制它，例如：if(this.props.children) return (this.props.children);

【解决方案3】：

我有类似的问题。我认为以下 sn-p 可以为您工作：

...
<Route name="dashboard">
  <Route path="/" handler={availableRoutes.Dashboard}/>
  <Route name="dashboard-child" path="dashboard-child" handler={availableRoutes.DashboardChild}/>

  <DefaultRoute handler={availableRoutes.Dashboard}/>
</Route>
...

【讨论】：