ReactRouterv6路由守卫使用全攻略

本文深入剖析 React Router v6 中自定义路由守卫（PrivateRoute 和 PublicRoute）的典型陷阱——误用已废弃的 `component` 属性而非正确透传 `children`，导致守卫失效、页面空白或重定向异常；文章直击问题根源，提供开箱即用的修复代码、清晰的嵌套使用示例，以及关于 `replace`、`AuthContext` 位置、`children` 安全渲染等关键实践要点，助你快速构建逻辑严谨、体验流畅的身份感知路由系统。

本文详解 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 ;
  }

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

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

  if (user) {
    return ;
  }

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

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

  } />
  } />

  {/* ✅ 正确：children 模式 */}
  
  } />

  
  } />

  
  } />

⚠️ 关键注意事项：

• 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 等私有路径仅对已认证用户开放——逻辑闭环，体验健壮。

今天关于《ReactRouterv6路由守卫使用全攻略》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！