reactjs – react-router中的嵌套路由

发布时间：2020-12-15 06:36:46 所属栏目：百科来源：网络整理

导读：我在React-Router中设置了一些嵌套路由(v0.11.6是我的反对)，但是每当我尝试访问其中一个嵌套路由时，它触发父路由。我的路线看起来像这样： Route handler={App} Route name="home" path="/" handler={availableRoutes.Splash} / DefaultRoute handler={av

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

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

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

所以，用这个配置：

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

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

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

和dashboard-child具有：

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!