React Router 避免卸载答案

【问题标题】：React Router avoid unmountingReact Router 避免卸载
【发布时间】：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} /> 看看它是否每次都挂载/卸载？

标签： reactjs react-router

【解决方案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。