javascript - React Router，单击浏览器后退按钮时的生命周期

Question

我想检测用户何时按下后退按钮。本质上，当用户从/projects 转到/projects/foo 时，导航样式会发生变化。

<Route path="/projects" component={(props, state, params) => 
        <Projects {...props} />
</Route>

这在检测从/projects 到特定项目的 onClick 事件时工作正常，但是当用户点击后退按钮时 componentDidMount 没有被调用...我正在尝试使用 this.props.location.pathname 来确定具体路径，但由于我需要设置状态，所以我不能在 render 中执行此操作。

是否有解决此问题的“ react ”方式？谢谢

Answer 1

正如您所指出的，componentDidMount 只会在安装组件时调用一次。相反，使用生命周期钩子(Hook) componentWillReceiveProps。 Here是文档。

如果您处于所需/正确的路径，您可以使用它来有条件地设置状态。这将更新状态，然后重新渲染组件。

更新:

自发布此答案以来，componentWillReceiveProps 已被弃用。根据您的用例，您需要使用 shouldComponentUpdate 或 getDerivedStateFromProps。更多信息here .