在反应中，当路由路径不同但组件相同时。如何防止重新安装？

Posted 2023-02-21

【中文标题】在反应中，当路由路径不同但组件相同时。如何防止重新安装？

【英文标题】：In react, when the route path is different, but same component. How can I prevent re-mounting?

【发布时间】：2017-09-11 23:51:16

【问题描述】：

在 react router (v2) 中，当路由路径不同但组件相同时。

我们如何防止重新挂载组件，例如卸载组件然后再次挂载组件。

它会导致调用 componentDidMount 两次。

当有订阅请求时，我的应用会订阅两次。

所以订阅的事件会被调用两次。

我该如何解决？

【参考方案1】：

只需嵌套您的 react-router 代码。如下所示，

  <Route component=Home>
    <IndexRoute />
    <Route path="/" />
    <Route path="/market" />
  </Route>

父标签只定义你要调用一次的组件，子标签只定义路径。

那么如果路由路径将'/'更改为'/market'，则不会重新挂载组件。

以下代码是您可能不想要的重新安装场景。

...

<Route component=Home path="/" />
<Route component=Home path="/trade" />

...