React项目升级后match属性缺失问题求助

你的问题源于React Router v6与旧版本（v5及更早）的API差异：v6已移除通过组件props传递match对象的方式，转而使用useParams钩子获取路由参数。以下是具体修复步骤：

1. 调整路由参数类型定义 #

删除原有的IRouteParams接口，替换为贴合v6的参数类型：

// 定义List页面的路由参数类型
interface IListRouteParams {
  type: string;
}

2. 修改List组件代码 #

移除对match props的依赖，改用useParams钩子获取路由参数：

import React from 'react';
import { useParams } from 'react-router-dom';

const List: React.FC = () => {
  // 通过useParams获取路由参数并指定类型
  const { type } = useParams<IListRouteParams>();

  // 注意：若路由参数非必填，type可能为undefined，可根据业务添加处理逻辑
  return (
    <div>当前选中类型：{type}</div>
  );
};

export default List;

3. 路由配置保持不变 #

你现有的路由配置符合v6写法，无需修改：

import React from 'react';
import { Routes, Route} from 'react-router-dom';
import Layout from '../Components/Layout';
import Dashboard from '../Pages/Dashboard';
import List from '../Pages/List';

const AppRoutes: React.FC = () => (
  <div>
    <Routes>
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/list/:type" element={<List />} />
    </Routes>
  </div>
);

export default AppRoutes;

核心原因说明 #

React Router v6彻底重构了路由API，不再将match、location等路由相关对象作为props传递给路由组件，而是通过useParams、useLocation等内置钩子获取信息——这也是你收到类型错误的根本原因：现在<List />组件不会收到任何props，自然不符合IRouteParams的类型要求。

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