React路由器，浏览器返回按钮点击时的生命周期

Question

我想检测用户何时按下了“返回”按钮。简而言之，当用户从 /projects 转到 /projects/foo 时，导航样式会发生变化。

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

当从 /projects 转到特定项目时，检测 onClick 事件工作正常，但是当用户点击后退按钮时，componentDidMount 方法不会被调用... 我尝试使用 this.props.location.pathname 来确定特定路径，但由于我需要设置 state ，因此我无法在 render 中执行此操作。

有没有一种 "react" 的方法来解决这个问题？谢谢。

- vesperae

Answer 1

正如您所指出的那样，componentDidMount只在组件挂载时调用一次。相反，使用生命周期钩子componentWillReceiveProps。文档在这里。

如果您处于所需/正确的路径上，则可以使用此选项有条件地setState。这将更新状态，然后重新呈现组件。

更新：

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

- gabrielwr