React+TS+Vite使用useRoutes配置路由报TS2749错误

• 最核心的触发点：当前编写路由配置的文件后缀为.ts，而非.tsx。TypeScript 解析规则中，仅.tsx后缀的文件支持JSX语法解析，在纯.ts文件中遇到<HelloWorld />这类尖括号开头的写法时，解析器会默认将其识别为TS泛型、类型断言类的类型语法，不会判定为React组件节点，因此直接抛出「将值作为类型使用」「缺少闭合>」的解析错误。
• 附带的HelloWorld 类型解析为any报错，是TS无法正确识别@/HelloWorld路径对应模块的类型导致，通常是路径别名配置错误、组件导入/导出不匹配、组件文件后缀错误引发的连锁问题。

1. 将当前路由配置文件的后缀从.ts修改为.tsx，这一步是解决JSX解析错误的关键，修改后TS会正确识别组件标签写法。
2. 校验路径别名配置：确认vite.config.ts中配置了@指向src目录的别名，同时tsconfig.json中也配置了对应的paths映射，避免TS无法识别@/开头的导入路径。
3. 校验组件导入导出匹配：如果HelloWorld组件是默认导出（export default HelloWorld），需要把当前的命名导入import { HelloWorld } from "@/HelloWorld"改为默认导入import HelloWorld from "@/HelloWorld"；如果是命名导出则保持现有导入写法即可。
4. 确认HelloWorld组件本身的文件后缀为.tsx，且返回合法的React节点，保证TS能正确识别组件类型。

import { useRoutes, RouteObject } from "react-router-dom";
import HelloWorld from "@/HelloWorld";

function Router() {
  const routes: RouteObject[] = [
    {
      path: "hello-world",
      element: <HelloWorld />,
    },
  ];

  return useRoutes(routes);
}

export default Router;

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