React18手动封装WithRouter

在react18以前,如果是一个路由组件的话,在其props属性有当前路由地址,路由跳转等方法,而到了18以后以为推崇函数式组件,直接把路由组件props删除了,而函数式组件还可以通过hooks获取并使用,那类式组件只能自己进行封装。

import { useLocation, useNavigate, useParams } from 'react-router'
export function withRouter(Child: any): Function {
    return (props: {}) => {
        const location = useLocation()
        const navigate = useNavigate()
        return <Child {...props} location={location} navigate={navigate} params={useParams}></Child>
    }
}

首先从React route引入useLocation, useNavigate, useParams这几个hooks。

既然类式组件无法使用它们,那我们就通过函数return进行返回类式组件,通过props属性手动去传递给他们,child是传递的类式组件，可能是别的组件的子组件,通过三点运算符,将其接受的props解构赋值。