React Router v6登录跳转/product报错：[Product]非Route组件

问题原因 #

React Router v6 对 <Routes> 的子组件有严格限制：仅允许 <Route> 或 <React.Fragment> 作为直接子元素。你之前的 AuthenticatedRoute 作为自定义组件直接放在 <Routes> 下，违反了这个规则，导致报错。

修改方案 #

1. 重构 AuthenticatedRoute.js #

将自定义认证组件改为路由守卫组件，以下两种方式二选一：

方式一：使用 Outlet 实现嵌套路由（推荐）

import { Navigate, Outlet } from 'react-router-dom';

const AuthenticatedRoute = ({ isAuthenticated }) => {
  // 已登录则渲染子路由内容，未登录跳转到登录页
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};

export default AuthenticatedRoute;

方式二：直接包裹目标组件

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

const AuthenticatedRoute = ({ isAuthenticated, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" replace />;
};

export default AuthenticatedRoute;

2. 调整 App.js 中的路由配置 #

根据上面的方式对应修改路由结构：

对应方式一的路由配置

将需要认证的路由嵌套在 AuthenticatedRoute 所在的父 Route 下：

import { Routes, Route, useState } from 'react-router-dom';
import AuthenticatedRoute from './AuthenticatedRoute';
import Product from './Product';
import Login from './Login';

function App() {
  // 假设你通过状态存储登录状态
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <div className="App">
      <Routes>
        {/* 公开路由：登录页 */}
        <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
        
        {/* 认证路由组：所有子路由都需登录才能访问 */}
        <Route element={<AuthenticatedRoute isAuthenticated={isAuthenticated} />}>
          <Route path="/product" element={<Product />} />
          {/* 其他需要认证的路由可添加在此 */}
        </Route>
      </Routes>
    </div>
  );
}

export default App;

对应方式二的路由配置

将 AuthenticatedRoute 作为 Route 的 element 属性值，包裹目标组件：

import { Routes, Route, useState } from 'react-router-dom';
import AuthenticatedRoute from './AuthenticatedRoute';
import Product from './Product';
import Login from './Login';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <div className="App">
      <Routes>
        <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
        {/* 在Route的element中用认证组件包裹Product */}
        <Route path="/product" element={
          <AuthenticatedRoute isAuthenticated={isAuthenticated}>
            <Product />
          </AuthenticatedRoute>
        } />
      </Routes>
    </div>
  );
}

export default App;

3. 菜单条件渲染说明 #

菜单部分的条件渲染逻辑可保留，比如根据 isAuthenticated 控制菜单项显示/隐藏，这部分与路由配置不冲突，只要确保路由结构符合React Router v6规则即可。

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