React Router v6 路由守卫中正确传递子组件的完整教程

顺亿

2026-10-12 • 👁 0人浏览过

本文详解 React Router v6 中 PrivateRoute 和 PublicRoute 守卫组件的常见错误——误用 component 属性而非 children，并提供可直接复用的修复方案、使用示例及关键注意事项。本文详解 react router v6 中 `privateroute` 和 `publicroute` 守卫组件的常见错误——误用 `component` 属性而非 `children`，并提供可直接复用的修复方案、使用示例及关键注意事项。在 React Router v6 中，组件不再支持 element 属性接收函数式组件（如 } />），也不再接受自定义 component prop 作为子内容载体。官方推荐模式是：将受保护的 JSX 元素作为 children 透传给守卫组件。你遇到的“登出后无法访问登录/注册页”问题，根本原因正是 PrivateRoute 和 PublicRoute 错误地依赖了不存在的 component prop，导致 children 实际未被渲染，路由逻辑中断。 ✅ 正确实现：使用 children 替代 component 以下是修复后的守卫组件代码（含类型提示与健壮性增强）：

// src/routes/PrivateRoute.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; // ✅ 直接返回 children，不包裹额外元素
};

// src/routes/PublicRoute.jsx
export const PublicRoute = ({ children }) => {
  const { user } = useContext(AuthContext);

  if (user) {
    return ;
  }

  return children; // ✅ 未登录用户才渲染 children
};

? 正确配置 Routes（v6.4+ 推荐写法）注意：exact 属性在 v6 中已废弃，path 默认全匹配；element 必须是 React Element （即 JSX），不可为组件引用： React Native For Android 源码编译中文WORD版本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看下载

// src/App.jsx
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    
      } />
      } />

      {/* ✅ PublicRoute 包裹子元素，children 自动注入 */}
      } 
      />
      } 
      />

      {/* ✅ PrivateRoute 同理 */}
      } 
      />
    
  );
}

export default App;

⚠️ 关键注意事项不要解构 element 或 component ：的值必须是已执行的 JSX 元素（如），不是组件函数（Dashboard）或带 props 的调用（）。若需传参，请通过 Context 或自定义 Hook 处理。 replace: true 建议添加：避免登录后点击浏览器「返回」跳回 /login，造成循环。确保 AuthContext 及时更新：守卫依赖 user 状态，务必确认登出动作触发 AuthContext 的 user = null 并触发重渲染。嵌套路由场景：若需保护整个子路由树，可结合 Outlet 与布局组件（如），而非逐个包裹。 ✅ 验证效果未登录访问 /dashboard → 自动跳转 /login，且 location.state.from 记录原路径；已登录访问 /login 或 /register → 自动跳转 /dashboard；登出后刷新 /login 页面 → 正常显示登录表单（children 被正确渲染）。遵循此模式，你的路由守卫将稳定、语义清晰，并完全兼容 React Router v6 的设计理念。

相关文章