reactjs - 嵌套路由的 React Router 整页

Question

使用 React-Router 有没有办法管理覆盖在原始路由导航之上的嵌套路由？
我经历了react-router documentation但是很难找到原始导航链接被删除或隐藏在页面上的示例。
我正在寻找如下图所示的示例:

我试图让上图中的每个选项卡都由一个唯一的路由表示，然后当用户单击选项卡下的元素时，该元素的详细 View 将显示在应用程序标题下方的整个页面之上。对我来说，嵌套路由在这种情况下似乎有意义，但是，嵌套路由将详细组件放在选项卡式组件下方。这不是我正在寻找的用户体验。
鉴于上述情况，我认为有意义的路线如下:
标签:
/概述/tab1
/概述/tab2
/概述/tab3
元素的详细 View :
/overview/tab1/elements/:elementNumber
我能够使用以下方法实现这一目标:

export function Navigation() {
  return (
    <div>
      <Switch>
        <Route path="/tabs">
          <TabbedNavigation />
        </Route>
        <Route path="/details">
          <DetailedNavigation />
        </Route>
      </Switch>
    </div>
  );
}

export function TabbedNavigation() {
  return (
    <>
      <Switch>
        <Route path="/tabs/tab1">
          <Tab1 />
        </Route>
        <Route path="/tabs/tab2">
          <Tab2 />
        </Route>
        <Route path="/tabs/tab3">
          <Tab3 />
        </Route>
      </Switch>
    </>
  );
}

export function DetailedNavigation() {
  return (
    <>
      <Switch>
        <Route path="/details/elements/:elementNumber">
          <ElementDetails />
        </Route>
      </Switch>
    </>
  );
}

以上工作正常，并提供了我希望实现的用户体验，但我觉得必须有更好的方法来使用 react-router api 实现相同的目标。
是否可以使用 react-router 过度播放路由？

Answer 1

你可以用 CSS 来实现，用 position: "relative" 设置绿色容器样式，以及带有 position: "absolute" 的详细 View 和 left , right , top , bottom至 0 .有了这个，详细信息 View 将覆盖绿色容器的所有其他内容，因为它相对于它的 closest positioned ancestor 定位。 (具有位置属性的第一个祖先)

<GreenContainer style={{ position: "relative" }}>
...
   <DetailsView 
      style={{
        position: "absolute",
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
      }}
   >
   ...

这是我使用 react-router 文档中提供的嵌套路由示例设置的代码和框
https://codesandbox.io/s/react-router-typescript-demo-forked-n0woz?file=/src/example.tsx
注意:我假设绿色容器是标题的兄弟