React TS升级react-router-dom 6.3.0提示无导出成员match报错

react-router-dom 6.x 版本存在大量不兼容更新，和当前报错直接相关的变更有两点：

• 5.x 版本作为公共API导出的match类型，在6.x版本中已经被移除，不再支持直接导入使用
• 6.x 的Route组件不再支持给element属性传入渲染函数来获取match/params等路由上下文属性，element仅接收合法的React元素；同时5.x常用的Redirect组件也被移除，替换为Navigate组件。

需要分别修改类型定义、路由配置两部分代码。

1. 修正接口类型定义 #

v6 中提供了PathMatch类型作为路由匹配结果的类型定义，可直接替换原来的match类型；如果组件内只需要用到路径参数，更推荐直接通过hook获取，不需要依赖props传递match对象。
修改后的类型代码如下：

// 移除原来的 import { match } from 'react-router-dom'
import type { PathMatch } from 'react-router-dom';

export interface ContentTypeIdParams {
  contentTypeId: string;
}

export interface ContentTypeBreadcrumbProps {
  // 替换原match泛型类型
  match: PathMatch<ContentTypeIdParams>;
}

注意：v6 不会自动给路由组件注入match/location/history等props，所有路由上下文都需要通过对应hook获取：

• 获取路径参数：调用useParams<ContentTypeIdParams>()，直接返回带类型约束的params对象
• 获取完整路由匹配结果：调用useMatch(路径规则)，返回对应路径的PathMatch类型结果

2. 修正路由配置写法 #

原来在element中写渲染函数拿match参数、使用Redirect组件的写法都不兼容v6，需要把重定向逻辑抽离为独立组件，在组件内通过hook获取参数，同时用Navigate组件替换Redirect。
修改后的路由代码如下：

import { Route, Navigate, useParams } from 'react-router-dom';

// 抽离重定向逻辑为独立组件
const VersionComparisonRedirect = () => {
  // 直接通过hook获取路由参数，不需要从match中解构
  const params = useParams<ContentTypeIdParams>();
  return (
    <Navigate
      to={getUrlWithParams(
        RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON,
        params
      )}
      replace // 加replace属性实现和原Redirect一致的替换历史栈效果，避免产生无效历史记录
    />
  );
};

// 路由配置直接传入React元素给element属性
<Route
  path={`${RoutesEnum.RELEVANCE_TESTING_VERSIONS_COMPARISON_TEST_CASE}*`}
  element={<VersionComparisonRedirect />}
/>

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