时间戳

首页 > 解决方案 > React Router：用组件包装一些路由，而不是直接在 Switch 内部

reactjs - React Router：用组件包装一些路由，而不是直接在 Switch 内部

问题描述

我正在尝试做这样的事情

<Switch>
    <SomeNavBar>
        <Route path="page1">Page 1</Route>
        <Route path="page2">Page 2</Route>
        <Route path="page3">Page 3</Route>
    </SomeNavBar>
    <OtherNavBar>
        <Route path="admin">Admin Page</Route>
    </OtherNavBar>
</Switch>

我有一个不是管理页面的路由的包装器组件。

但是，管理路由不会呈现Admin Page它只是呈现一个空白页面。其他路线工作正常。

有没有办法实现这种行为？

标签： reactjsreact-router

解决方案

您的示例有几个问题与您应该先纠正的问题无关。

首先是 a 的直接子级Switch必须始终是 aRoute或Redirect- 它不知道如何处理任何其他元素，只会渲染它看到的第一件事（在您的情况下，SomeNavBar组件）。第二个是path声明必须以斜线开头，以便路由器正确构建它们，/page1例如/admin。

顺便说一句，这里有一个有点做作的例子，说明如何获得你所追求的行为。对于页面，我们在渲染之前检查可能的片段列表SomeNavBar和正确的路线。还要注意exact参数 - 这样我们就不会匹配仅以特定片段开头的路径，例如/page1foo：

<Switch>
  <Route exact path={['/page1', '/page2', '/page3']}>
    <SomeNavBar>
        <Route path="/page1">Page 1</Route>
        <Route path="/page2">Page 2</Route>
        <Route path="/page3">Page 3</Route>
    </SomeNavBar>
  </Route>
  <Route path="/admin">
    <OtherNavBar>
      Admin Page
    </OtherNavBar>
  </Route>
</Switch>

推荐阅读