使用react-router-dom 6.22.3+TypeScript时遇类型未找到及导入问题

核心问题原因 #

React Router v6及以上版本内置了完整的TypeScript类型定义，不需要额外安装@types/react-router-dom（该包仅适配v5及更早版本）。你遇到的类型找不到问题，源于类型名称错误，以及路由定义方式的类型不匹配。

具体修复步骤 #

1. 移除冲突的旧类型依赖（若已安装）
   若之前安装过旧版类型包，先卸载避免类型冲突：

   npm uninstall @types/react-router-dom
   

2. 修正类型导入
   你要找的DOMRouterOpts实际类型名称是RouterOptions，createBrowserRouter返回的类型是Router，直接从react-router-dom导入即可：

   import type { RouterOptions, Router } from "react-router-dom";
   

3. 修正路由定义的类型不匹配
   createRoutesFromElements返回的是React.ReactNode，无法直接赋值给RouteObject[]类型，有两种修正方式：

   • 方式一：直接传入createRoutesFromElements的结果到createBrowserRouter

     import { Route, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
     import type { RouterOptions, Router } from "react-router-dom";
     import Root from "@src/routes/Root";
     import Home from "@src/routes/Home";
     
     const opts: RouterOptions = {
       // 配置路由选项，如basename等
     };
     
     export const router: Router = createBrowserRouter(
       createRoutesFromElements(
         <Route path="/" element={<Root />}>
           <Route index element={<Home />} />
         </Route>
       ),
       opts
     );
     

   • 方式二：改用RouteObject数组定义路由（更贴合TypeScript类型规范）

     import { createBrowserRouter } from "react-router-dom";
     import type { RouteObject, RouterOptions, Router } from "react-router-dom";
     import Root from "@src/routes/Root";
     import Home from "@src/routes/Home";
     
     const routes: RouteObject[] = [
       {
         path: "/",
         element: <Root />,
         children: [
           { index: true, element: <Home /> }
         ]
       }
     ];
     
     const opts: RouterOptions = {
       // 配置路由选项
     };
     
     export const router: Router = createBrowserRouter(routes, opts);
     

额外检查 #

确保你的react-router-dom版本为6.22.3，可通过以下命令查看：

npm list react-router-dom

若版本不符，重新安装指定版本：

npm install react-router-dom@6.22.3

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