Vite React TypeScript项目持续出现红色下划线报错求助

1. 修正类型引用方式 #

你大概率是把Routes组件本身当成类型来用了——Routes是一个React组件（属于“值”），不能直接作为TypeScript类型。解决方法分两种情况：

情况1：需要引用Routes组件的类型 #

用typeof获取组件的类型：

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

// 正确写法：用typeof获取Routes的类型
const MyComponent = (props: { routeComponent: typeof Routes }) => {
  return <div>{props.routeComponent}</div>;
};

情况2：需要定义路由配置的类型 #

如果是要约束路由配置数组，应该用React Router内置的RouteObject类型（v6+版本）：

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

// 定义路由数组的类型
const routes: RouteObject[] = [
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> }
];

2. 确认依赖版本兼容性 #

React Router DOM v6及以上版本已经内置TypeScript类型，无需单独安装@types/react-router-dom。如果你的版本低于v6，要么升级到v6+，要么安装对应版本的类型包：

# 升级到最新v6版本
npm install react-router-dom@latest

# 若坚持用v5，安装对应类型
npm install @types/react-router-dom@5 --save-dev

3. 检查tsconfig.json关键配置 #

确保你的tsconfig.json有以下正确配置，避免类型解析异常：

{
  "compilerOptions": {
    "jsx": "react-jsx", // Vite项目推荐的JSX模式
    "moduleResolution": "bundler", // 适配Vite的模块解析
    "strict": true, // 开启严格类型检查（可选但推荐）
    "lib": ["ES2020", "DOM", "DOM.Iterable"] // 包含DOM相关类型
  },
  "include": ["src"]
}

4. 清除缓存重启服务 #

Vite或TypeScript的缓存可能导致类型解析出错，执行以下操作：

• 关掉当前的Vite开发服务
• 删除项目根目录下的node_modules/.cache文件夹
• 重新执行npm run dev启动服务

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