Question

我使用React Router创建了标签，每个标签都有不同的路由。但是，我想通过保持隐藏的选项卡安装来保持选项卡转换之间的选项卡状态。我该如何实现这一目标？每次路由切换时，React路由器都会重新安装每个组件。

有人已经问过这个问题here，但还没有收到答案

理想情况下，我会找到一个解决方案，以便在第一次点击后保留未显示的标签

Answer 1

我必须多做一些工作才能确认这确实有效，但通过React Router文档阅读this Route组件。使用component prop会在每次路径更改时重新组件。但是使用其他渲染方法，您可能能够实现您正在寻找的东西。我会选择render，但children也可以使用吗？

Answer 2

这是 react-router-dom-v5 doc 在 render、children 和 component 属性上推荐的路由方法<Route/>。这样我们的组件就会在每次路径匹配时重新初始化和重新安装。

 <Switch>
    <Route exact path="/">
       <Home />
    </Route>
    <Route path="/contact">
       <Contact />
     Route>
    <Route path="/about">
       <About />
    </Route>
 </Switch>

因为你（Kat）希望通过保持隐藏的标签被安装来保持标签转换之间的标签状态。

您可以通过一次安装所有标签，然后使用 react-router-dom 的 pathname 在标签之间切换来实现此目的。

const { pathname } = useLocation();
{pathname === "/"? <Home/>: null}
{pathname === "/contact"? <Contact/>: null}
{pathname === "/about"? <About/>: null}

这样您的组件就不会在每次匹配路径时重新初始化和重新安装，因此组件状态不会受到干扰，并且会在选项卡中自动处理。
这是正在运行的 DEMO：https://codesandbox.io/s/react-router-experiment-ilfhq?file=/src/component/Home.js:166-201
希望我回答了你的问题。
这是使用 CSS 的第二个解决方案演示：https://codesandbox.io/s/react-router-mouted-routes-32dxf?file=/src/App.js

反应路由器选项卡 - 保持组件已安装

2 个答案: