React-Router 在离开时重新加载组件

Question

我正在努力了解 React 和 Redux。我目前有这样的设置：

商店的状态有一个“activeAction”属性，它接受一个数字。 Page 组件使用“activeAction”来确定应该在应用程序中心显示哪个组件，并根据当前 URL 进行更改。例如，'/Home' 是 activeAction: 0，而 '/About' 是 activeAction: 1

/Home 的组件称为 BlogRoll，该组件中有实际的逻辑来显示来自博客 api 调用的帖子。我正在调用该操作以在组件 componentDidMount 函数中显示帖子。 /About 的组件只有一个显示“内容区域”的渲染函数......现在只是一个占位符。

我的导航设置为链接组件：

<div className="NavItem">
   <Link to={'/Home'} activeClassName="ActiveMenuItem">Home</Link>
</div>
<div className="NavItem">
   <Link to={'/About'} activeClassName="ActiveMenuItem">About</Link>
</div>

我遇到的问题是在单击Home Link（工作正常）然后单击About Link 之后，BlogRoll 组件在转到 About 组件之前被重新加载。我通过在BlogRoll.componentDidMount() 中设置一个断点来知道这一点。我点击转到关于但在此之前它会重新加载 BlogRoll。

这是故意行为吗？它似乎不应该这样做，但我仍在学习，可能还没有完全理解组件生命周期。

感谢您的帮助！

Answer 1

这是一种故意的行为。

在React-router 中，如果组件没有被渲染，它就会被卸载。

您可以在react-router repo 中阅读有关组件生命周期的更多信息。

如果您希望组件中的状态保持不变，您可以使用 Redux 存储。