react路由在layout中的监听

• 业务中需要在layout里来监听路由的变化，但是layout并不是一个路由组件，所以layout组件内的props并没有location,history等属性，（路由组件：由Route组件处理的才是路由组件）所以我们需要将layout组件转变成路由组件，react-route-dom提供的高阶组件(withRouter)可以实现，

withRotuer 的用法:他是一个函数，接受一个组件作为参数

withRouter 是一个高阶组件 HOC ，因为默认只有被 Route 包裹的组件才能获取到路由状态，如果当前非路由组件想要获取状态，那么可以通过 withRouter 包裹来获取 history ，location 等信息。

const Nav = (props) => {
useEffect(()=>{
    console.log('history.location.pathname:', history.location)
  },[history.location])
}
export default withRouter(Nav)

const Nav = withRouter（(props) => {
useEffect(()=>{
    console.log('history.location.pathname:', history.location)
  },[history.location])
}）
export default Nav

• 也可以通过 history 对象来进行监听。

• • history.listen 本身返回的是一个 unlisten 函数用来取消监听的，在组件 unmount 的时候调用即可

  useEffect(()=>{
    const unListen = history.listen((location)=>{
      console.log('2222:', location)
    })
    return unListen
  },[])

参考文档：「React进阶」react-router v6 通关指南 - 掘金