react 全局监听路由（浏览器url）变化

1.index.js入口文件

监听路由需要用到另一个高阶组件 WithRouter ，而这个高阶组件需要被 HashRouter 包裹，否则会报一个错误 Uncaught Error: Invariant failed: You should not use <withRouter(App) /> outside a ，所以将 HashRouter 放在外层包裹根组件

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
)

2.App.js根组件

WithRouter
通过 withRouter 将 react-router 的 history、location、match 三个对象传入 props 对象上，路径变化，属性就会变化，属性变化，就会触发

UNSAFE_componentWillReceiveProps 这个钩子，可以通过这个钩子监听路由的变化，监听整个项目的路由

import React, { Component } from 'react';
import { withRouter, Switch, Route } from 'react-router-dom';

const Home = () => (
  <div>Home组件</div>
)

const FOO = () => (
  <div>FOO组件</div>
)

class App extends Component {
  constructor(props) {
    super();
  }

  componentDidMount() {
    console.log('浏览器刷新触发');
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 判断跳转路由不等于当前路由
    if (nextProps.location.pathname !== this.props.location.pathname) {
      console.log('路由改变触发');
    }
  }

  render() {
    return (
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/foo" component={FOO}/>
      </Switch>
    )
  }
}

export default withRouter(App);

3.效果图

刷新页面触发 componentDidMount 生命周期

手动修改路由url为 /foo,UNSAFE_componentWillReceiveProps 钩子函数被触发

不存在的路由同样能被监听到，手动修改为 /foo2

UNSAFE_componentWillReceiveProps 钩子函数同样被触发 ，可以看到路由改变触发执行了两次

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。