React Router V6 Outlet Context无法传递至受保护路由问题

问题原因 #

你的问题核心是Outlet Context的传递范围限制：

• Layout组件的Outlet Context仅能传递给它的直接子路由组件（Home、AuthRequired、Login）
• Usage是AuthRequired的子路由，它获取的是AuthRequired组件渲染的Outlet的Context，而非Layout的
• 当前AuthRequired组件没有渲染Outlet并传递上层Context，导致Usage调用useOutletContext()时返回undefined

解决方案 #

修改AuthRequired组件，让它接收上层Context并传递给子路由：

1. 在AuthRequired中调用useOutletContext()获取Layout传递的上下文
2. 渲染Outlet时，通过context属性将获取到的上下文传递下去

修改后的AuthRequired组件示例 #

import { Outlet, useOutletContext, Navigate } from 'react-router-dom';
import { useMsal } from '@azure/msal-react';

export default function AuthRequired() {
  // 获取Layout传递的上下文
  const layoutContext = useOutletContext();
  const { accounts } = useMsal();

  // 鉴权逻辑：未登录则跳转至登录页
  if (accounts.length === 0) {
    return <Navigate to="/login" replace />;
  }

  // 将Layout的上下文传递给子路由（Usage）
  return <Outlet context={layoutContext} />;
}

验证说明 #

• 修改完成后，Usage组件调用useOutletContext()就能正常拿到Layout传递的reportingPeriod等上下文数据
• 之前将Usage移出受保护路由测试有效，是因为Usage变成了Layout的直接子路由，可直接接收Layout的Outlet Context
• React Context API能工作是因为它是全局上下文，不受路由嵌套层级的限制

内容的提问来源于stack exchange，提问作者Devang