React Router v6导入路由至createBrowserRouter时出现语法错误

在React项目中使用createBrowserRouter方法时，将路由配置放在外部文件导入会抛出Uncaught SyntaxError: Unexpected token '<'错误，但直接在main.jsx中定义路由配置则正常运行。

错误场景代码 #

main.jsx #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import { MainRoutes } from "./Routes/main.routes";
const router = createBrowserRouter(MainRoutes);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

main.routes.js #

import App from "../App";
import ErrorPage from "../error-page";

export const MainRoutes = [
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
  },
];

正常运行的代码 #

main.jsx #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import App from "./App";
import ErrorPage from "./error-page";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

使用的环境配置 #

package.json #

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "vite": "^4.0.0"
  }
}

问题原因 #

这个错误的核心原因是路由配置文件main.routes.js未被正确识别为JSX文件。

在Vite环境中，@vitejs/plugin-react仅会处理后缀为.jsx或.tsx的文件中的JSX语法。你的路由配置文件使用了.js后缀，里面的<App />这类JSX语法没有被转译，浏览器直接读取时无法识别JSX的<符号，因此抛出语法错误。

而直接在main.jsx中编写路由配置时，.jsx后缀会被插件正确处理，JSX会被转译为浏览器能识别的JavaScript代码，所以可以正常运行。

解决方案 #

• 将main.routes.js重命名为main.routes.jsx
• 更新main.jsx中的导入语句（若Vite未配置自动识别后缀，需明确添加.jsx后缀）：

  import { MainRoutes } from "./Routes/main.routes.jsx";
  

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