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

Question

我想检测用户何时单击后退按钮。 本质上，当用户从/ projects转到/ projects / foo时，导航样式会更改。

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

当检测到从/ projects到特定项目的onClick事件时，此方法工作正常，但是当用户单击后退按钮时，未调用componentDidMount ...。我试图使用this.props.location.pathname确定特定路径，但是由于需要设置状态，因此我无法在render执行此操作。

有没有一种“反应”的方式来解决这个问题？ 谢谢

Answer 1

如您所述， componentDidMount仅在安装组件时被调用一次。 而是使用生命周期挂钩componentWillReceiveProps 。 这是文档。

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

更新：

自发布此答案以来，不推荐使用componentWillReceiveProps WillReceiveProps。 根据您的用例，您将需要使用shouldComponentUpdate或getDerivedStateFromProps 。 有关此的更多信息。