reactjs - react-router 中的嵌套路由

Question

我在 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>

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

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

Answer 2

这是@bjfletcher 对 react-router 1.0.0 的回答的更新。如升级指南中所述：

RouteHandler离开了。现在根据活动路线Router自动填充您的组件。this.props.children

所以而不是

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

你会使用：

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

Answer 3

我有类似的问题。我认为以下代码段可能对您有用：

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

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