前言

在react-router-dom6中不再提供withRouter这个高阶组件。官方推荐使用hooks，useNavigate。但是在类组件中无法使用hooks。因此我们需要自己封装一个withRouter的高阶组件。

withRouter实现

import React from 'react'
import type { NavigateFunction } from 'react-router-dom'
import { useLocation, useNavigate, useParams } from 'react-router-dom'

export interface RoutedProps<Params = any, State = any> {
  location: State
  navigate: NavigateFunction
  params: Params
}

export function withRouter<P extends RoutedProps>(Child: React.ComponentClass<P>) {
  return (props: Omit<P, keyof RoutedProps>) => {
    const location = useLocation()
    const navigate = useNavigate()
    const params = useParams()
    return <Child { ...props as P } navigate={ navigate } location={ location } params={ params }/>
  }
}