react 如何監(jiān)聽(tīng)路由變化

componentWillUpdate(nextProps) 或者 componentDidUpdate(prevProps)

componentWillUpdate(nextProps) {
    if (this.props.location !== nextProps.location) {
      // 路由變化
    }
}

分2種情況：
1、普通react組件（指不是通過(guò)Route導(dǎo)入的組件）
普通組件需要自己定義上下文

static contextTypes = {
    router: PropTypes.shape({
      history: PropTypes.shape({
        push: PropTypes.func.isRequired,
        replace: PropTypes.func.isRequired,
        createHref: PropTypes.func.isRequired
      }).isRequired
    }).isRequired
  }
componentDidMount() {
    this.context.router.history.listen(() => {
      
    })
}

2、Route導(dǎo)入的組件
Route組件已經(jīng)封裝好了上下文，并且設(shè)置了props可用。

componentDidMount() {
    this.props.history.listen(() => {
      
    })
}

原生js的辦法是：

window.addEventListener('hashchange', () => {

})

componentDidMount() {
    this.context.router.history.listen((route) => {
        if(route.pathname === '/xxx') {
            console.log(1);
        }
    });
}