我使用React Router创建了选项卡,每个选项卡有一个不同的路由。但是,我想通过保持隐藏的选项卡挂载来在选项卡转换之间保持选项卡状态。我该如何实现?React router在每次路由切换时重新挂载每个组件。
有人已经在这里提出了这个问题,但没有得到答案。
理想情况下,我希望找到一种解决方案,在第一次点击后仍保持未显示的选项卡挂载。
有人已经在这里提出了这个问题,但没有得到答案。
理想情况下,我希望找到一种解决方案,在第一次点击后仍保持未显示的选项卡挂载。
我需要再深入研究一下以确认这个方法是否有效,但是在阅读React Router文档时,我发现了关于Route
组件的this。使用component
属性会使组件在每次路由更改时重新挂载。但是使用其他渲染方法,您可能能够实现您想要的效果。我会选择render
,但children
也可能有效?
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}
CSS
的第二种解决方案演示:https://codesandbox.io/s/react-router-mouted-routes-32dxf?file=/src/App.js
React
及其工具的良好实践和设计模式之外,没有“干净”的方法来做到这一点。也许你可以将它保存在本地存储中,但我不建议这样做。state
是属于class
(React.component
类)实例的内存对象,当你销毁该类时,也会销毁此对象。正统的方法是将状态提升到共同的父级或通过状态管理器(如redux
)在外部保存它。 - Sagiv b.g