React Router组件出现SyntaxError: Unexpected token '<'错误求助

核心原因分析 #

你遇到的错误大概率是React Router版本不兼容导致的——你的代码采用了React Router v5的写法，但当前项目可能安装的是v6版本。v6对路由API做了大幅改动，比如移除了Switch、Route的component/render属性，替换Redirect为Navigate，旧写法在v6环境下会触发JSX解析错误。

另外需要排查代码中是否存在HTML转义字符（比如你贴的代码里的<>），实际代码中必须使用原生JSX语法<>...</>（Fragment），转义字符会被解析器视为无效语法。

分步解决方案 #

1. 确认React Router版本 #

运行以下命令查看当前版本：

npm list react-router-dom

如果版本号是6.x.x，则按以下方式修改代码适配v6。

2. 修改App.js适配v6 #

将Switch替换为Routes，Route的component属性改为element（传入JSX元素而非组件引用），并调整AuthRoute的使用方式：

import { useState } from "react";
import { AuthRoute } from "./util/route_util";
import "./App.css";
import "./scss/02_nav/nav.scss";
import NavBar from "./components/nav/navbar";
// 替换Switch为Routes
import { Routes, Route } from "react-router-dom";
import Splash from "./components/splash/splash_page";
// 导入Profile组件（需确保该组件存在）
import Profile from "./components/profile/profile_page";

function App() {
  return (
    <>
      <NavBar />
      <Routes>
        {/* AuthRoute包裹需要权限控制的Route元素 */}
        <Route 
          path="/" 
          element={
            <AuthRoute>
              <Splash />
            </AuthRoute>
          } 
        />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </>
  );
}

export default App;

3. 重写AuthRoute适配v6 #

v6不再支持Route的render属性，改用Navigate替代Redirect，通过子组件传递需要渲染的内容：

import { useSelector } from "react-redux";
import { Navigate, useLocation } from "react-router-dom";
import PropTypes from "prop-types";

const AuthRoute = ({ children }) => {
  const loggedIn = useSelector((state) => state.session.isAuthenticated);
  const location = useLocation();

  // 已登录用户跳转到profile页面，携带来源路由信息
  if (loggedIn) {
    return <Navigate to="/profile" state={{ from: location }} replace />;
  }

  // 未登录用户渲染目标页面
  return children;
};

AuthRoute.propTypes = {
  children: PropTypes.element.isRequired,
};

export { AuthRoute };

4. 其他排查点 #

• 检查代码中所有JSX语法，确保没有使用</>这类HTML转义字符，必须直接写</>。
• 确认Vite配置文件（vite.config.js）中已正确引入React插件：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
  })
  

• 清除Vite缓存后重启开发服务：

  npm run dev -- --force
  

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