logo标签列表

React Router标签页--保持组件已挂载

javascriptreactjstabsreact-router
9
我使用React Router创建了选项卡，每个选项卡有一个不同的路由。但是，我想通过保持隐藏的选项卡挂载来在选项卡转换之间保持选项卡状态。我该如何实现？React router在每次路由切换时重新挂载每个组件。
有人已经在这里提出了这个问题，但没有得到答案。
理想情况下，我希望找到一种解决方案，在第一次点击后仍保持未显示的选项卡挂载。
1
如果您想为多个组件维护“状态”，则需要一个不会重新挂载的父组件或类似于“redux”的状态管理器。 - Sagiv b.g
1
@Sag1v 谢谢！我更愿意在组件内部跟踪组件状态，我只是想在切换选项卡时保留组件在一个会话中挂载。 - kat
我认为除了React及其工具的良好实践和设计模式之外，没有“干净”的方法来做到这一点。也许你可以将它保存在本地存储中，但我不建议这样做。state是属于class（React.component类）实例的内存对象，当你销毁该类时，也会销毁此对象。正统的方法是将状态提升到共同的父级或通过状态管理器（如redux）在外部保存它。 - Sagiv b.g
2
你解决了这个问题吗？如果有解决方案，我会非常感兴趣。 - Unforgiven
2个回答
1

我需要再深入研究一下以确认这个方法是否有效，但是在阅读React Router文档时，我发现了关于Route组件的this。使用component属性会使组件在每次路由更改时重新挂载。但是使用其他渲染方法，您可能能够实现您想要的效果。我会选择render，但children也可能有效？

1
这是react-router-dom-v5文档推荐的路由方法，优于render、children和component属性。这样，每次路径匹配时，我们的组件都会得到重新初始化和重新挂载。请保留HTML标签。
 <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}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接