基于配置的React Router在TypeScript中触发ESLint错误

问题根源拆解 #

• 值与类型混淆：你导入的BrowserRouter是React组件（运行时的值），并非TypeScript类型，用它标注变量类型自然会触发“将值当作类型使用”的错误。
• 类型不匹配：createBrowserRouter返回的是react-router包中的Router类型实例，和BrowserRouter组件完全是两个概念，强行用BrowserRouter标注必然导致类型不兼容。
• any类型隐患：初始未指定路由数组类型时，TS会推断为any[]，触发ESLint的不安全any规则；即使指定RouteObject[]，若路由配置中存在隐含的any（比如未明确element类型），仍可能残留报错。

正确的TypeScript配置式路由写法 #

import { createBrowserRouter, RouterProvider, RouteObject } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

// 明确路由数组类型为RouteObject[]，约束配置格式
const routes: RouteObject[] = [
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
];

// 无需手动标注类型，TS会自动推断createBrowserRouter返回的具体Router实例类型
const myRouter = createBrowserRouter(routes);

function App() {
  return <RouterProvider router={myRouter} />;
}

export default App;

关键细节说明 #

• 省略手动类型标注：VS Code提示“应使用更具体的路由类型”，是因为createBrowserRouter返回的是带有路由配置上下文的专属实例类型，手动标注Router会丢失这些精准的类型信息。直接省略类型标注，TS会自动推断最匹配的类型。
• 严格约束RouteObject字段：如果需要强化类型检查，可确保每个路由项的element符合React.ReactNode | null类型（RouteObject已内置该约束），loader/action等函数也需明确参数和返回值类型，避免TS推断为any。
• ESLint错误根治：若仍有any相关报错，检查路由配置的每个字段是否完全符合RouteObject的类型定义，比如path必须是字符串，children必须是RouteObject[]或undefined等。

禁用ESLint规则的隐患 #

临时禁用规则能让代码运行，但会丢失TypeScript的类型安全校验，后续路由配置出现格式错误、组件类型不匹配等问题时，TS无法提前预警，增加线上bug风险。

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