3.封装withRouter

// 在react-router6.0中所有的组件都没有路由信息,也没有widthRouter, 需要使用hooks语法引入路由信息, 所以,我们可以自己封装withRouter高阶组件
// 由于路由数据是在props中,所以使用属性代理方式

import { useLocation, useParams, useNavigate }  from "react-router-dom"

function myHoc(OldCom){
    // 必须返回函数式组件, 因为hooks语法不能用于类组件
    return ()=>{
        // 从hooks中获取路由信息
        const location = useLocation() // 用于路由url传值和state对象传值
        const params = useParams()  // 用于动态路由传值
        const navigate = useNavigate() // 用于编程式导航跳转
        const tempProps = {location, params, navigate}

        // 返回组件模板
        return <OldCom {...tempProps} />
    }
}

export default myHoc