React Router 组件在路由更改时卸载答案

【问题标题】：React Router components getting unmount on route changeReact Router 组件在路由更改时卸载
【发布时间】：2017-09-23 20:53:49
【问题描述】：

我使用 React + Redux 创建了一个 SPA，我正在使用 react-route。我面临一个问题，每当我切换 /about、/contact、/list 等路线时。每次卸载组件时。

所以，我需要知道这是预期的行为还是我做错了什么。因为在某些组件中，我正在进行 ajax 调用以获取数据，如果组件被卸载并且用户再次返回......即使数据已经在存储中可用，它也会再次调用 ajax。

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="about" component={About} />
    <Route path="/" component={HomePage} />
</Route>

【问题讨论】：

“这是预期的行为”。是的。如果你改变路由，当前路由组件会被卸载，新路由组件会被挂载。
有什么办法可以阻止这种情况。实际上我不需要每次都卸载组件。因为不必要的ajax命中。这也是停止卸载组件的正确方法吗？

标签： ajax reactjs redux react-router

【解决方案1】：

每次导航到路由时，旧组件都会被删除，新组件会被加载并填充存储值（使用 redux 的连接）。

数据将始终在商店中可用，因此当组件卸载和重新加载时，您无需触发新的 ajax 请求。

而且，如果您仍然希望组件始终可用，那么您可以使用单个路由并使用导航菜单或选项卡在主组件中显示和隐藏组件。但取决于 DOM 组件的数量会变得很重。

【讨论】：

我完全同意你所说的，但我的问题是我正在调用 ajax（来自 componentWillMount 或 componentDidMount）来从它自己的组件中获取数据，如果一个组件将被卸载并再次安装它生命周期方法将被触发..
您可以将其保留在 componentDidMount 中，但如果之前已加载数据，则添加一个条件以不调度 loadAll 操作。所以它只会在第一次安装该组件时加载