TypeScript React升级react-router-dom v6类组件无需重构方案咨询

完全可以通过自定义封装 TypeScript 版本的 withRouter 高阶组件实现平滑升级，无需改动现有类组件的核心逻辑，以下是可直接投入生产使用的成熟方案：

1. 封装自定义 withRouter 高阶组件 #

在项目公共工具目录新建文件，写入以下TS代码：

import { useNavigate, useLocation, useParams, Params } from 'react-router-dom';
import React, { ComponentType } from 'react';

// 定义注入到类组件的路由属性类型
export interface WithRouterProps {
  navigate: ReturnType<typeof useNavigate>;
  location: ReturnType<typeof useLocation>;
  params: Params<string>;
}

export function withRouter<P extends object>(Component: ComponentType<P & WithRouterProps>) {
  const ComponentWithRouterProp = (props: P) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
  return ComponentWithRouterProp;
}

2. 现有类组件适配用法 #

只需要将原来从 react-router-dom 导入的 withRouter 换成上述自定义的版本即可，组件逻辑仅需调整路由API的调用字段：

import { withRouter, WithRouterProps } from '你自定义withRouter的路径';

// 类组件Props声明继承WithRouterProps即可获得类型提示
interface ITestComponentProps extends WithRouterProps {
  // 你的组件原有其他属性
  title: string;
}

class TestComponent extends React.Component<ITestComponentProps> {
  handleGoPage = () => {
    // 原v5的 this.props.history.push('/path') 替换为如下写法即可
    this.props.navigate('/path');
    // 路由参数直接从 this.props.params 取，替代原v5的 this.props.match.params
    console.log(this.props.params.id);
    // 当前路径信息从 this.props.location 取，用法和v5基本一致
    console.log(this.props.location.search);
  }

  render() {
    return <div onClick={this.handleGoPage}>{this.props.title}</div>
  }
}

// 导出时用自定义withRouter包裹
export default withRouter(TestComponent);

方案说明 #

该方案完全复用React Router v6官方提供的hooks能力，行为和官方原生API完全一致，没有额外兼容风险，仅需对原有类组件的路由调用字段做极小的替换，不需要调整任何组件的业务逻辑、生命周期等代码，适合大规模存量TypeScript类组件项目的平滑升级。

内容的提问来源于stack exchange，提问作者Daniele Ricci