迁移react-router-dom v5至v6遇LoadableComponent类型不兼容错误

问题根源 #

1. React Router v6的<Route>组件element属性要求传入ReactNode（即渲染后的组件实例），但你直接传入了loadable返回的组件类型（组件类/函数本身），导致类型不匹配。
2. 开发依赖中的@types/react-router-dom仍为v5版本，和实际使用的v6库版本不一致，进一步引发类型推断错误。

解决方案 #

1. 修正Route的element属性写法 #

将组件类型改为JSX实例形式，同时根路径无需使用/*（v6默认精确匹配根路径，原v5的exact属性已移除）：

// App.tsx
import * as router from 'src/routes';

<Route path="/" element={<router.Home />} />

2. 升级React Router v6的类型依赖 #

更新@types/react-router-dom到与当前react-router-dom匹配的v6版本，执行命令：

npm install @types/react-router-dom@^6.6.2 --save-dev
# 若使用yarn
yarn add @types/react-router-dom@^6.6.2 --dev

验证 #

修改完成后重新编译项目，类型错误即可消除。@loadable/component返回的组件以JSX实例形式传入时，会被正确识别为ReactNode，符合v6版本Route组件的要求。

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