react-router-v4 - 如何在React Router v4中监听路由变化？

Question

我有几个充当路线的按钮。每次路线更改时，我想确保事件按钮发生变化。

react router v4 有没有办法监听路由变化？

Answer 1

我使用 withRouter 来获取 location 属性。当组件因新路由而更新时，我检查值是否更改:

@withRouter
class App extends React.Component {

  static propTypes = {
    location: React.PropTypes.object.isRequired
  }

  // ...

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.onRouteChanged();
    }
  }

  onRouteChanged() {
    console.log("ROUTE CHANGED");
  }

  // ...
  render(){
    return <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/checkout" component={CheckoutPage} />
        <Route path="/success" component={SuccessPage} />
        // ...
        <Route component={NotFound} />
      </Switch>
  }
}