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

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

在 React Router v6 中， 组件不再支持 element 属性接收函数式组件（如 ）时自动注入 component prop。你当前的代码中将 、 等作为 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></navigate>;
  }

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

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

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

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

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

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

<routes><route path="/" element="{<Home"></route>} />
  <route path="/about" element="{<About"></route>} />

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

  <route path="/login" element="{"><login></login>
  } />

  <route path="/dashboard" element="{"><dashboard></dashboard>
  } />
</route></route></route></routes>

⚠️ 关键注意事项：

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

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