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>

工作正常。我筑巢的原因是因为我将在＆＃34;仪表板下面有多个孩子。并希望它们都以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>

Answer 2

这是对@bjfletcher对react-router 1.0.0的回答的更新。如upgrade guide中所述：

RouteHandler消失了。 Router现在会根据有效路径自动填充this.props.children个组件。

所以而不是

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

你会用：

<div><h1>Dashboard</h1>{this.props.children}</div>

Answer 3

我有类似的问题。我认为以下代码段可能适合您：

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

  <DefaultRoute handler={availableRoutes.Dashboard}/>
</Route>
...

react-router中的嵌套路由

3 个答案: