当我们在使用类组件又想要使用react-router v6版本的库时，这个时候我们可以使用高阶组件hoc来对类组件进行对应的增强。以下就是对应的代码。

import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom"
// 高阶组件：函数
export function withRouter(WrapperComponent) {
    return function(props) {
      // 1.导航
      const navigate = useNavigate()
      // 2.动态路由参数: /detail/:id
      const params = useParams()
      // 3.查询字符串的参数(querystring) /user?username=why
      const location = useLocation()
      const [searchParams] = useSearchParams()
      const query = Object.fromEntries(searchParams)
      const router = {navigate, params, location, query}
      return (
        <WrapperComponent { ...props } router={router} />
      )
    } 
  }

这个hoc分别给类组件增强了使用编程式导航、获取路由参数的hook的功能