React Router DOM v5迁移至v6：Route组件代码转换咨询

针对你提供的这段v5路由代码，迁移到v6的写法如下：

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

// 方案1：组件内部获取参数（推荐）
<Route
  path={CONFIRM_DELETE_INSTITUTE}
  element={<ConnectedInstituteConfirmDelete />}
/>

// 在ConnectedInstituteConfirmDelete组件中添加参数获取逻辑：
import { useParams } from 'react-router-dom';

interface RouteParams {
  instituteIndex: string;
}

const ConnectedInstituteConfirmDelete = () => {
  const { instituteIndex } = useParams<RouteParams>();
  const index = Number(instituteIndex);

  // 原有组件逻辑...
};

// 方案2：匿名组件包裹传参（无需修改原组件）
<Route
  path={CONFIRM_DELETE_INSTITUTE}
  element={
    <>
      {(() => {
        const { instituteIndex } = useParams<{ instituteIndex: string }>();
        return <ConnectedInstituteConfirmDelete instituteIndex={Number(instituteIndex)} />;
      })()}
    </>
  }
/>

核心变化说明 #

• Route属性替换：v6移除了v5的handle属性，改用element直接传入要渲染的React元素。
• 参数获取方式更新：路由参数不再通过match对象传递，必须使用useParams()钩子在组件内部获取。
• TypeScript类型适配：需为useParams指定泛型接口，明确参数类型以保证类型安全。

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