reactjs - react 路由器中的嵌套路由

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>

效果很好。我嵌套的原因是因为我将在“仪表板”下有多个子项，并希望它们在 URL 中都以 dashboard 为前缀。

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>