react-router中的嵌套路由 [英] Nested routes in react-router

问题描述

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

我的路线如下所示:

<Route name="home" path="/" handler={availableRoutes.Splash}/><DefaultRoute handler={availableRoutes.Splash}/><Route name="dashboard" handler={availableRoutes.Dashboard}><Route name="dashboard-child" handler={availableRoutes.DashboardChild}/></路线><NotFoundRoute handler={NotFound}/></路线>

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

<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}/></路线>

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

解决方案

配置不是关于路由(尽管名称)，而是更多关于路径驱动的布局.

因此，使用此配置:

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

这是说dashboard-child 将被嵌入到dashboard 中.这是如何工作的，如果 dashboard 有这样的东西:

仪表板

和 dashboard-child 有:

<h2>我是dashboard的孩子.</h2>

然后对于路径dashboard，由于没有匹配的路径，没有嵌入的子项，导致:

仪表板

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

Dashboard
我是dashboard的孩子.

I'm setting up some nested routes within React-Router (v0.11.6 is what I'm working against) but whenever I try and access one of the nested routes it triggers the parent route.

My routes look like this:

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

If I collapse the routes up so it looks like:

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

It works fine. The reason I was nesting was because I will have multiple children under the "dashboard" and wanted them all prefixed with dashboard in the URL.

解决方案

The configuration isn't about the routing (despite the name) but more about the layouts driven by paths.

So, with this configuration:

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

It is saying that dashboard-child is to be embedded inside dashboard. How this works is that if dashboard has something like this:

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

and dashboard-child has:

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

Then for the path dashboard there is no embedded child due to no matching path, resulting in this:

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

And for the path dashboard/dashboard-child the embedded child has a matching path, resulting in this:

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

这篇关于react-router中的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！