react-router-dom v6私有路由报错：<Route>需嵌套于<Routes>元素内

报错Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly是因为react-router-dom v6彻底重构了路由逻辑——所有<Route>组件必须直接作为<Routes>或另一个<Route>的子元素存在，不能在自定义组件里直接返回<Route>再独立使用。

原有的PrivateRoute写法在v6中不再适用，需要调整为v6支持的两种实现方式：

方式1：高阶组件包裹（推荐用于单页面权限控制） #

把PrivateRoute改成负责权限校验的包裹组件，直接返回页面元素或跳转登录页：

// PrivateRoute.js
import { Navigate } from 'react-router-dom';
// 假设你用AuthContext管理oidc的认证状态
import { useAuth } from './AuthContext';

const PrivateRoute = ({ children }) => {
  const { isAuthenticated } = useAuth();
  // 已认证则渲染目标页面，否则跳转到登录页
  return isAuthenticated ? children : <Navigate to="/login" replace />;
};

export default PrivateRoute;

在App.js中这样使用：

// App.js
import { Routes, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Profile from './Profile';
import Login from './Login';

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      {/* 用PrivateRoute包裹需要权限的Profile页面 */}
      <Route 
        path="/profile" 
        element={
          <PrivateRoute>
            <Profile />
          </PrivateRoute>
        } 
      />
    </Routes>
  );
}

export default App;

方式2：Outlet嵌套（适合复杂嵌套路由） #

如果需要多级嵌套路由，可借助<Outlet>渲染子路由，同时做权限校验：

// PrivateRouteWrapper.js
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './AuthContext';

const PrivateRouteWrapper = () => {
  const { isAuthenticated } = useAuth();
  // 已认证则渲染子路由，否则跳转登录页
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};

在App.js中配置嵌套路由：

// App.js
<Routes>
  <Route path="/login" element={<Login />} />
  {/* 父路由做权限校验，子路由通过Outlet渲染 */}
  <Route element={<PrivateRouteWrapper />}>
    <Route path="/profile" element={<Profile />} />
    <Route path="/profile/settings" element={<ProfileSettings />} />
  </Route>
</Routes>

• 确保所有路由定义都放在<Routes>组件内部，包括嵌套路由
• 认证状态isAuthenticated要和oidc-client的状态同步，比如通过监听userLoaded、userUnloaded事件更新上下文状态

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