React Router v6：如何在Loader函数中访问全局状态？

下面是几种符合React Router设计理念的优雅解决方案，适配不同的项目场景：

1. 利用createBrowserRouter的全局Context配置 #

React Router v6允许在创建路由实例时传入全局context，可以将认证状态（userId、token）直接注入，在loader函数中通过参数获取：

// 从本地存储或认证逻辑中获取当前用户状态
const currentAuth = {
  userId: localStorage.getItem('userId'),
  token: localStorage.getItem('token')
};

const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <App />,
      children: [
        {
          path: "/user-specific-resources",
          element: <UserResources />,
          loader: async ({ context }) => {
            // 直接从context中提取认证信息
            const { userId, token } = context;
            const response = await fetch(`/api/user/${userId}/resources`, {
              headers: { Authorization: `Bearer ${token}` }
            });
            return response.json();
          },
        },
      ],
    },
  ],
  {
    context: currentAuth // 注入全局认证上下文
  }
);

如果认证状态是动态变化的（比如登录/登出后更新），可以将路由实例的创建放在React组件内部，通过useContext或状态管理工具获取最新认证状态，再传递给createBrowserRouter的context参数，配合RouterProvider动态更新路由。

2. 顶层路由Loader共享认证状态 #

在根路由添加loader来获取/验证认证状态，子路由通过getRouteLoaderData复用该状态：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    id: "root-route", // 给根路由设置唯一ID
    loader: async () => {
      // 这里可以添加异步验证逻辑，比如调用API校验token有效性
      return {
        userId: localStorage.getItem('userId'),
        token: localStorage.getItem('token')
      };
    },
    children: [
      {
        path: "/user-specific-resources",
        element: <UserResources />,
        loader: async () => {
          // 通过路由ID获取根路由loader返回的认证数据
          const authData = await getRouteLoaderData("root-route");
          const { userId, token } = authData;
          
          const response = await fetch(`/api/user/${userId}/resources`, {
            headers: { Authorization: `Bearer ${token}` }
          });
          return response.json();
        },
      },
    ],
  },
]);

这种方式适合需要异步验证认证状态的场景，根路由统一处理认证逻辑，所有子路由直接复用结果。

3. 直接调用全局状态管理工具 #

如果项目使用了Zustand、Redux等全局状态管理库，可以直接在loader函数中调用状态获取方法（无需React Hook）：

示例（Zustand） #

// authStore.js
import { create } from 'zustand';

export const useAuthStore = create((set) => ({
  userId: localStorage.getItem('userId'),
  token: localStorage.getItem('token'),
  updateAuth: (userId, token) => set({ userId, token })
}));

// 资源路由的loader函数
export async function resourceLoader() {
  // 直接调用getState()获取当前认证状态
  const { userId, token } = useAuthStore.getState();
  
  const response = await fetch(`/api/user/${userId}/resources`, {
    headers: { Authorization: `Bearer ${token}` }
  });
  return response.json();
}

这种方式简单直接，适合已经引入全局状态管理的项目，无需额外配置React Router。

你遇到的是实际开发中非常常见的场景，并非遗漏文档内容，React Router v6提供了多种灵活的方案适配不同架构，选择最贴合你项目技术栈的方式即可。

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