REACT-路由器中的嵌套路由

Question

<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中以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>

而仪表板-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>