react全局监听路由变化

关于WithRouter

作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

介绍一个简单应用

通过withRouter将三个属性传入组件的props上，路径变化，属性就会变化，属性变化，就会触发componentWillReciveProps这个钩子，我们可以利用这个钩子做一些处理，而要监听路由的变化，就要监听整个项目的路由，所以我们要找到最大的组件 最大的组件是App，但是他是函数式组件，所以我们找到下一级组件Main

Main.js

//当从浏览器中直接输入地址时，withRouter将路由属性传入Main组件的this.props中，通过componentWillReceiveProps全局监测到路由变化，进行逻辑操作
import { withRouter } from 'react-router-dom' //引入withRouter
class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.location.hash !== this.props.location.hash) {
      window.leftMenu.forceUpdate(); //当路由不同时，强制更新左边栏组件
    }
  }
  render() {
    return (
        <div>
          <Header/>
          <LeftMenu ref={el => {window.leftMenu = el}}/>
          <Module/>
        </div>
    )
  }
}
export default withRouter(Main)  //包裹

App.js

根组件中需要使用BrowserRouter包裹，否则会报错信息 You should not use <Route> or withRouter() outside a <Router>

import { BrowserRouter } from "react-router-dom";
function App() {
  ReactDOM.render(
    <BrowserRouter>
      <ConfigProvider locale={locale}>
        <Main />
      </ConfigProvider>
    </BrowserRouter>,
    document.getElementById("root")
  );
}
App()
if (module.hot) {
  module.hot.accept('./view/Main.js', function () {
    App()
  })
}