react-router中的嵌套路由

小编典典

react-router中的嵌套路由

reactjs

我正在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中都带有前缀。

阅读 1156

2020-07-22

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

2020-07-22