给class组件赋予函数组件的能力（useNavigate）

需求：想让一个class组件使用函数组件中的Hooks——useNavigate来实现页面的跳转及传参，也是使用了高阶组件

// 封装高阶组件
// 原因是想让class组件拥有函数组件的useNavigate的能力，
//withRouter函数相当于一个父组件，
//WrapperComponent参数表示的是传入的子组件，
//将useNavigate的能力像父传子一样传递出去
function withRouter(WrapperComponent) {
  return function (props) {
    // 在函数组件中通过hook拿到navigate对象
    let na = useNavigate()
    // 将获取到的navigate放到一个对象中
    const router = { na }
    return <WrapperComponent {...props} router={router}></WrapperComponent>
  }
}

export class Maphouse extends Component {
  //转到详情页
  zhuan(path, id) {
    // console.log(path,id);
    console.log(this.props.router, 'props');
    const { na } = this.props.router
    na(path, { state: id })
  }
    
  //其他代码

}
//暴露时包裹
export default withRouter(Maphouse)