reactjs – react-router中的嵌套路由

前端之家收集整理的这篇文章主要介绍了reactjs – react-router中的嵌套路由前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在React-Router中设置了一些嵌套路由(v0.11.6是我的反对),但是每当我尝试访问其中一个嵌套路由时,它触发父路由。

我的路线看起来像这样:

  1. <Route handler={App}>
  2. <Route name="home" path="/" handler={availableRoutes.Splash} />
  3. <DefaultRoute handler={availableRoutes.Splash} />
  4.  
  5. <Route name="dashboard" handler={availableRoutes.Dashboard}>
  6. <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
  7. </Route>
  8.  
  9. <NotFoundRoute handler={NotFound} />
  10. </Route>

如果我折叠路由,使它看起来像:

  1. <Route handler={App}>
  2. <Route name="home" path="/" handler={availableRoutes.Splash} />
  3. <DefaultRoute handler={availableRoutes.Splash} />
  4.  
  5. <Route name="dashboard" handler={availableRoutes.Dashboard} />
  6. <Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />
  7.  
  8. <NotFoundRoute handler={NotFound} />
  9. </Route>

它工作正常。我嵌套的原因是因为我将在“仪表板”下有多个孩子,并希望他们都在网址中添加仪表板。

配置不是关于路由(尽管名称),但更多关于由路径驱动的布局。

所以,用这个配置:

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

这是说仪表板 – 孩子是嵌入仪表板内。这是如何工作的,如果仪表板有这样的:

  1. <div><h1>Dashboard</h1><RouteHandler /></div>

和dashboard-child具有:

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

然后对于路径仪表板没有嵌入的子由于没有匹配的路径,导致这样:

  1. <div><h1>Dashboard</h1></div>

对于路径仪表板/ dashboard-child,嵌入的孩子具有匹配的路径,导致:

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

猜你在找的React相关文章