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>