React Router v6+如何正确引用路由文件？报错求助

错误原因 #

React Router v6 对 <Routes> 的直接子元素有严格限制：只能是 <Route> 或包裹 <Route> 的 <React.Fragment>，自定义组件（比如你的 <AuthRoutes />）不能直接作为 <Routes> 的子组件，这就是报错的核心原因。

修正方案 #

方案一：直接渲染拆分的路由集合 #

修改 authRoutes.jsx，让它返回包裹在 <React.Fragment> 中的路由元素：

import React from 'react';
import { Route } from 'react-router-dom';
import Login from '../pages/Auth/Login';

const AuthRoutes = () => (
  <React.Fragment>
    <Route path="/auth/login" element={<Login />} />
    {/* 可在此添加更多 auth 相关路由 */}
  </React.Fragment>
);

export default AuthRoutes;

修改 routes/index.jsx，直接调用 AuthRoutes() 渲染其返回的路由内容，而不是把它作为组件标签使用：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import MainPage from '../pages/MainPage';
import AuthRoutes from './authRoutes';

const AllRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainPage />} />
        {/* 直接渲染拆分的路由集合 */}
        {AuthRoutes()}
      </Routes>
    </Router>
  );
}

export default AllRoutes;

方案二：使用嵌套路由（推荐，更符合 v6 设计理念） #

修改 authRoutes.jsx，内部使用 <Routes> 管理子路由：

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Login from '../pages/Auth/Login';

const AuthRoutes = () => {
  return (
    <Routes>
      {/* 子路由路径不需要带 /auth，父路由会自动拼接 */}
      <Route path="login" element={<Login />} />
      {/* 可添加其他 auth 子路由，比如注册 */}
      {/* <Route path="register" element={<Register />} /> */}
    </Routes>
  );
}

export default AuthRoutes;

修改 routes/index.jsx，添加父路由匹配 /auth/*，并将 AuthRoutes 作为其渲染元素：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import MainPage from '../pages/MainPage';
import AuthRoutes from './authRoutes';

const AllRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainPage />} />
        {/* 父路由匹配所有 /auth 开头的路径，交由 AuthRoutes 处理子路由 */}
        <Route path="/auth/*" element={<AuthRoutes />} />
      </Routes>
    </Router>
  );
}

export default AllRoutes;

为什么你的尝试没生效 #

• 改 <> 为 React.Fragment：问题不在 AuthRoutes 内部的包裹方式，而是 <Routes> 的子元素是自定义组件，不符合 v6 的路由结构要求。
• 改 <> 为 Routes：AuthRoutes 依然是自定义组件，直接放在主 <Routes> 里不被允许，且嵌套的 Routes 需要父路由配合才能生效。
• 改 element={<Login />} 为 element={Login}：element 属性要求接收 React 元素（即组件实例），而非组件本身，这个修改本身就不符合语法规范，也没解决路由结构问题。

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