React Router 6.14.1中TypeScript类型错误求助

问题原因 #

你遇到的@typescript-eslint/no-unsafe-assignment和@typescript-eslint/no-unsafe-call错误，核心原因是手动定义的MainRoutes和AuthRoutes没有明确的类型约束，TypeScript无法推断它们符合react-router要求的路由对象类型，被默认识别为any类型，触发了ESLint的安全规则。

解决方案 #

通过导入react-router-dom官方提供的RouteObject类型，给路由对象做显式类型标注，让TypeScript正确识别路由结构的合法性。

步骤1：导入RouteObject类型 #

从react-router-dom中导入官方定义的RouteObject类型，用于约束路由对象的结构：

import { RouteObject } from 'react-router-dom';

步骤2：给MainRoutes添加类型标注 #

修改你的MainRoutes代码，为其指定RouteObject类型：

import { RouteObject } from 'react-router-dom';
import MainLayout from '../layouts/MainLayout';
import TodoListPage from '../components/pages/TodoListPage/TodoPage';
import ProtectedRoute from './ProtectedRoute';

const MainRoutes: RouteObject = {
  path: '/',
  element: <MainLayout />,
  children: [
    {
      path: '/',
      element: (
        <ProtectedRoute>
          <TodoListPage />
        </ProtectedRoute>
      ),
    }, 
  ],
};

export default MainRoutes;

步骤3：对AuthRoutes做同样处理 #

将AuthRoutes也用RouteObject类型标注，确保传入createBrowserRouter的所有路由对象都有明确的类型：

import { RouteObject } from 'react-router-dom';
// 导入你的Auth相关组件和布局

const AuthRoutes: RouteObject = {
  // 你的Auth路由结构定义
};

export default AuthRoutes;

额外增强（可选） #

如果路由的children结构复杂，可显式指定children的类型为RouteObject[]，进一步提升类型安全性：

const MainRoutes: RouteObject = {
  path: '/',
  element: <MainLayout />,
  children: [
    {
      path: '/',
      element: (
        <ProtectedRoute>
          <TodoListPage />
        </ProtectedRoute>
      ),
    }, 
  ] as RouteObject[],
};

同时确保ProtectedRoute组件类型正确，需接收children属性并返回合法React元素：

import { ReactNode } from 'react';
import { Navigate } from 'react-router-dom';

interface ProtectedRouteProps {
  children: ReactNode;
}

const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
  const isAuthenticated = /* 你的鉴权逻辑 */;
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
};

export default ProtectedRoute;

完成以上修改后，TypeScript就能正确推断路由对象的类型，ESLint的unsafe相关错误会自动消失。

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