React 路由器选项卡——保持组件安装答案

【问题标题】：React Router Tabs -- Keep Components MountedReact 路由器选项卡——保持组件安装
【发布时间】：2017-10-12 16:56:53
【问题描述】：

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

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

理想情况下，我会找到一个解决方案，让第一次点击后未显示的选项卡保持挂载

【问题讨论】：

如果您想为多个组件维护state，您将需要一个未重新安装的父组件或像redux 这样的状态管理器。
@Sag1v 谢谢！我宁愿跟踪组件本身内部的组件状态，我真的只想让组件安装在切换选项卡之间的一个会话中
我认为除了 react 及其工具的良好实践和设计模式之外，没有“干净”的方式来做这件事。也许您可以将其保存在本地存储中，但我建议不要这样做。 state 是一个内存对象，属于 class（React.component 类）的实例，当您销毁该类时，您会销毁该对象。正统的方法是将状态提升到一个共同的父级，或者通过像redux这样的状态管理器将其保存在外部。
您解决了这个问题吗？我会对解决方案非常感兴趣

标签： javascript reactjs tabs react-router

【解决方案1】：

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

【讨论】：

【解决方案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
希望我回答了您的问题。
这是第二个解决方案DEMO，使用CSS：https://codesandbox.io/s/react-router-mouted-routes-32dxf?file=/src/App.js

【讨论】：