React Router私有路由报错：<Route>需嵌套于<Routes>元素内

这个错误的核心原因是React Router v6强制要求所有<Route>必须直接作为<Routes>的子元素，不能在自定义组件（比如你的PrivateRoute）内部直接渲染<Route>。之前基于v5的PrivateRoute写法（直接返回Route组件）在v6里完全不适用，这就是你报错的根源。

正确的PrivateRoute实现（两种可选方案） #

方案1：布局式PrivateRoute（推荐，支持嵌套路由）

这种写法用<Outlet>渲染匹配的子路由内容，适合需要批量保护多个路由的场景：

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

const PrivateRoute = () => {
  // 替换成你的实际认证逻辑，比如从Context、Redux或localStorage获取状态
  const isAuthenticated = localStorage.getItem('authToken') !== null;

  // 已认证则渲染子路由，未认证跳转到登录页
  return isAuthenticated ? <Outlet /> : <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 './pages/Profile';
import Login from './pages/Login';
import Home from './pages/Home';

function App() {
  return (
    <Routes>
      {/* 公开路由 */}
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />

      {/* 受保护的路由组：所有嵌套在这个Route下的页面都需要认证 */}
      <Route element={<PrivateRoute />}>
        <Route path="/profile" element={<Profile />} />
        {/* 可以继续添加其他需要权限的路由，比如 /settings、/dashboard 等 */}
      </Route>
    </Routes>
  );
}

export default App;

方案2：包裹式PrivateRoute（适合单个路由）

如果只需要保护单个路由，可以让PrivateRoute接收children并直接返回：

// PrivateRoute.js
import { Navigate } from 'react-router-dom';

const PrivateRoute = ({ children }) => {
  const isAuthenticated = localStorage.getItem('authToken') !== null;
  return isAuthenticated ? children : <Navigate to="/login" replace />;
};

export default PrivateRoute;

对应的App.js配置：

// App.js
<Routes>
  <Route path="/profile" element={
    <PrivateRoute>
      <Profile />
    </PrivateRoute>
  } />
</Routes>

为什么之前的尝试没用？ #

如果你之前的PrivateRoute是直接返回<Route>组件（比如v5的写法），哪怕把它嵌套进<Routes>，本质上还是在自定义组件内部渲染了<Route>，违反了v6的规则。必须把PrivateRoute改成不直接渲染Route的形式，而是作为路由的element属性值或者布局组件来使用。

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