在 react-router-dom 中更改路由时如何防止重新安装组件？答案

【问题标题】：How to prevent remounting of component when changing route in react-router-dom?在 react-router-dom 中更改路由时如何防止重新安装组件？
【发布时间】：2021-07-04 19:13:42
【问题描述】：

当我从其他组件返回某个组件时，我想阻止它重新安装。

例子，

function App() {
   <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route exact path="/about">
      <About />
    </Route>
   </Switch>
}

如果我转到/about 并返回/，我不想再次为主页组件运行useEffect，因为我正在使用firestore 实时更新来更新主页上的帖子和当 useEffect 运行时，它会再次从 firstore 获取所有帖子。

有什么方法可以防止 Home 组件重新挂载吗？

【问题讨论】：

我认为您必须使用自定义挂钩，因为 useEffect 总是在重新挂载时运行。此外，您希望组件“重新安装”，这就是您显示它的方式。我认为您可以澄清一下您希望它重新安装，但您不希望 useEffect 触发。
与其试图规避默认行为（即在路由更改时卸载），我建议考虑将您对 firestore 的调用重新定位到不会被卸载的 App 组件。将您需要的信息传递给Home 组件。

标签： reactjs react-router-dom

【解决方案1】：

如果您想让Home 组件保持挂载状态，您可能需要使用css 将其“卸载”。因此，如果路由不完全是 '/'，您可以将 display: none; 添加到应用组件中。

当路由不是'/' 时，您还可以将组件构造为return null，否则返回所需的标记。这样你就可以一直挂载它，但不会渲染任何东西。

我认为比这两种方法更好的是用上下文包装你的Switch 并从这个上下文中启动你的获取。然后，您可以控制您的 Firestore 获取的一个控制源，并根据需要从上下文中读取。此视频显示了此https://youtu.be/PKwu15ldZ7k?t=963 的示例

【讨论】：