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() }) }