React Router 避免卸载

Question

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

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

React Router 版本 4.

Answer 1

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

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

Answer 2

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

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

Answer 3

两年后 Shubham 的解决方案现在有点不同

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

注意顺序。

React Router 避免卸载

React Router avoid unmounting

reactjs

react-router