嵌套路由的 React Router 整页答案

【问题标题】：React Router full page for nested route嵌套路由的 React Router 整页
【发布时间】：2021-09-05 15:37:26
【问题描述】：

使用 React-Router 有没有办法管理覆盖在原始路由导航之上的嵌套路由？

我浏览了react-router documentation，但找不到原始导航链接被删除或隐藏在页面上的示例。

我正在寻找如下图所示的示例：

我试图让上图中的每个选项卡都由唯一的路线表示，然后当用户单击选项卡下的元素时，该元素的详细视图将显示在应用标题下方的整个页面上方。对我来说，嵌套路由在这种情况下似乎很有意义，但是，嵌套路由将详细组件放在选项卡式组件下方。这不是我想要的用户体验。

鉴于上述情况，我认为有意义的路线如下：

标签：
/概述/tab1
/概述/tab2
/概述/tab3

元素的详细视图：
/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 过度播放路由？

【问题讨论】：

为什么不直接使用absolute 或fixed 作为DetailedNavigation 组件的CSS position 并让margin-top 等于您的应用程序标头？
@foxtrotuniform6969，很抱歉，我没有听从建议。我理解设置位置属性，但是将 margin-top 设置为等于我有点迷失的应用程序标题。您是说将 margin-top 设置为等于标题的高度吗？如果标题的高度是动态的并且可以根据内容改变会发生什么？
嘿@FlatPenguin，我的回答对你有用吗？如果没有，我可以尝试另一种方法

标签： reactjs react-router

【解决方案1】：

您可以使用 CSS 来实现，将绿色容器设置为 position: "relative" 样式，将详细视图设置为 position: "absolute" 和 left、right、top、bottom 到 0。这样，详细信息视图将覆盖绿色容器的所有其他内容，因为它相对于其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

注意：我假设绿色容器是标题的兄弟

【讨论】：

【解决方案2】：

需要将需要覆盖的元素包裹在switch中

const TabMenu = () => (

  <div >
  <Link to="/tabs/tab1">Tab1</Link> <span>  </span>
  <Link to="/tabs/tab2">Tab2</Link> <span>  </span>
  <Link  to="/tabs/tab3">Tab3</Link>
  </div>)

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

因为 TabMenu 在 Switch 元素内，所以会被详细视图替换。

这是工作代码示例

https://codesandbox.io/s/react-router-full-page-for-nested-route-s15rx?file=/src/App.js

【讨论】：