首页 文章

react-router中的嵌套路由

提问于
浏览 次
27

我在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中以 dashboard 为前缀 .

reactjs react-router

3 回答

  • 13

    配置不是关于路由（尽管名称），而是关于路径驱动的布局 .

    所以，有了这个配置：

    <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>
    回复于
  • 0

    这里's an update to @bjfletcher'的答案为react-router 1.0.0 . 正如_1047640中所述：

    RouteHandler消失了 . 路由器现在根据活动路由自动填充组件的this.props.children .

    而不是

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

    你会用：

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

    回复于
  • 41

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

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

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

相关问题