React Router 避免卸载

Posted 2023-02-19

【中文标题】React Router 避免卸载

【英文标题】：React Router avoid unmounting

【发布时间】：2018-11-14 19:14:47

【问题描述】：

我有 3 条使用相同组件的路由，并且基于路由显示的内容略有不同。问题是，在每条路线上更改整个组件从头开始安装/卸载会导致性能问题。避免卸载但仍使用相同组件并拥有这 3 条路线的最佳方法是什么？

<Route path="/Products" exact render=Products />
<Route path="/Products/shoes" exact component=Products />
<Route path="/Products/books" exact component=Products />

React 路由器版本 4。

【问题讨论】：

你使用的是哪个版本的 react-router

@stack26 版本 4

你可以试试<Route path="/Products/:type?" exact render=Products /> 看看它是否每次都挂载/卸载？

【参考方案1】：

您可以根据路由条件路径匹配来渲染Route，在这种情况下，每次路由更改时它都不会重新挂载

<Route path="/Products(/shoes|/books)?" exact render=Products />

【参考方案2】：

Shubham 的解决方案现在有点不同，两年后就在这里

<Route path=["/Products/shoes", "/Products/books", "/Products"] exact render=Products />

注意顺序。

【参考方案3】：

只要匹配新路由，并行路由就会卸载。您需要在 Product 组件中包装“/Products/shoes”和“/Products/books”的组件。在 react-router v4 中，您需要嵌套类似于您的组件的路由。所以你需要在子组件中有包含“/Products”路由和其他2个的产品组件。

坦率地说，我只是给出了一个概述，阅读 react-router 4 文档以获得更好的理解。

【讨论】：

这不正确。你不必筑巢。 @Shubham 正确地将 component 属性替换为 render。