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

Question

我正在尝试做这样的事情

<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它只会呈现一个空白页面。其他路线运行良好。

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

Answer 1

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

第一个是 a 的直接子元素Switch必须始终是Routeor 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>