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

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

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

以下是修复后的守卫组件代码（含类型提示与健壮性增强）：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

// 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 <navigate to="/login" state="{{" from: location replace></navigate>;
  }

  return children; // ✅ 直接返回 children，不包裹额外元素
};

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

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

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

? 正确配置 Routes（v6.4+ 推荐写法）

注意：exact 属性在 v6 中已废弃，path 默认全匹配；element 必须是 React Element（即 JSX），不可为组件引用：

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

function App() {
  return (
    <routes><route path="/" element="{<Home"></route>} />
      <route path="/about" element="{<About"></route>} />

      {/* ✅ PublicRoute 包裹子元素，children 自动注入 */}
      <route path="/register" element="{<PublicRoute"><register></register>} 
      />
      <route path="/login" element="{<PublicRoute"><login></login>} 
      />

      {/* ✅ PrivateRoute 同理 */}
      <route path="/dashboard" element="{<PrivateRoute"><dashboard></dashboard>} 
      />
    </route></route></route></routes>
  );
}

export default App;

⚠️ 关键注意事项

不要解构 element 或 component：的值必须是已执行的 JSX 元素（如），不是组件函数（Dashboard）或带 props 的调用（）。若需传参，请通过 Context 或自定义 Hook 处理。
replace: true 建议添加：避免登录后点击浏览器「返回」跳回 /login，造成循环。
确保 AuthContext 及时更新：守卫依赖 user 状态，务必确认登出动作触发 AuthContext 的 user = null 并触发重渲染。
嵌套路由场景：若需保护整个子路由树，可结合 Outlet 与布局组件（如），而非逐个包裹。