本文详解 React Router v6 中 PrivateRoute 和 PublicRoute 自定义守卫的常见错误——误用 component 属性而非 children，并提供可直接复用的修复方案、使用示例及关键注意事项。

本文详解 react router v6 中 `privateroute` 和 `publicroute` 自定义守卫的常见错误——误用 `component` 属性而非 `children`，并提供可直接复用的修复方案、使用示例及关键注意事项。

在 React Router v6 中，<Route> 组件不再支持 element 属性接收函数式组件（如 <PrivateRoute><Dashboard /></PrivateRoute>）时自动注入 component prop。你当前的代码中将 <Register />、<Login /> 等作为 PrivateRoute/PublicRoute 的子元素传入，但守卫组件内部却试图读取不存在的 component prop，导致子组件根本未被渲染——这正是登出后无法访问 /login 或 /register 页面的根本原因：PublicRoute 逻辑虽正确，但 children 被忽略，返回值为空。

✅ 正确做法是：统一使用 children prop 接收并透传子元素。以下是修复后的完整守卫实现：

// src/components/RouteGuards.jsx
import React, { useContext } from "react";
import { AuthContext } from "../context/auth";
import { Navigate, useLocation } from "react-router-dom";

export const PrivateRoute = ({ children }) => {
  const { user } = useContext(AuthContext);
  const location = useLocation();

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children; // ✅ 直接渲染传入的 JSX 子节点
};

export const PublicRoute = ({ children }) => {
  const { user } = useContext(AuthContext);

  if (user) {
    return <Navigate to="/dashboard" replace />;
  }

  return children; // ✅ 未登录用户才渲染子内容（如 Login/Register）
};

? 使用方式（注意：无需 element={...} 包裹，直接嵌套）：

React Router Code Review

审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。

下载

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />

  {/* ✅ 正确：children 模式 */}
  <Route path="/register" element={
    <PublicRoute><Register /></PublicRoute>
  } />

  <Route path="/login" element={
    <PublicRoute><Login /></PublicRoute>
  } />

  <Route path="/dashboard" element={
    <PrivateRoute><Dashboard /></PrivateRoute>
  } />
</Routes>

⚠️ 关键注意事项：

• replace: true 推荐添加在 <Navigate> 中，避免登录/登出后点击浏览器“返回”按钮跳回受保护页面；
• AuthContext 必须确保在 Router 上层 Provider 中正确包裹，否则 useContext 将返回 undefined；
• 不要对 children 做额外条件判断（如 children && children），因为 children 可能是 null、string 或 Fragment，直接 return children 即可；
• 若需支持多个子元素（如带布局的页面），可配合 React.Fragment 或自定义 Layout 组件，children 天然支持任意合法 JSX。

通过以上修正，路由守卫将严格按身份状态分流：未登录用户可自由访问 /login 和 /register；已登录用户访问二者时被重定向至 /dashboard；而 /dashboard 等私有路径仅对已认证用户开放——逻辑闭环，体验健壮。