React 第四十二节 Router 中useLoaderData的用途详解

一、前言

useLoaderData，用于在组件中获取路由预加载的数据 。它通常与路由配置中的 loader 函数配合使用，用于在页面渲染前异步获取数据（如 API 请求），并将数据直接注入组件，从而简化数据流管理。

二、useLoaderData核心用途

预加载页面数据 ：在路由匹配时自动触发数据加载，减少组件渲染后的等待时间。 简化组件逻辑 ：组件无需手动处理数据获取和状态管理。 支持服务端渲染 (SSR) ：与 React Router 的服务端渲染方案无缝集成。 数据共享 ：同一路由下的嵌套组件可直接访问 loader 数据。

三、useLoaderData基本使用步骤

定义路由配置 ：在路由中声明 loader 函数。 在组件中获取数据 ：通过 useLoaderData() 读取 loader 返回的数据。

四、示例：用户信息页面

4.1、 定义路由配置（使用 createBrowserRouter）

// src/main.jsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import UserPage, { userLoader } from "./UserPage";

const router = createBrowserRouter([
  {
    path: "/user/:userId",
    element: <UserPage />,
    loader: userLoader, // 数据预加载函数
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

4.2 定义 Loader 函数（异步获取数据）

// src/UserPage.jsx
export async function userLoader({ params }) {
  // 从路由参数中获取 userId
  const userId = params.userId;

  try {
    // 模拟 API 请求
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error("用户不存在");
    const userData = await response.json();
    return userData; // 返回的数据会被 useLoaderData() 接收
  } catch (error) {
    // 抛出错误，由 React Router 错误边界处理
    throw new Response("加载用户数据失败", { status: 404 });
  }
}

4.3、 在组件中使用 useLoaderData

// src/UserPage.jsx
import { useLoaderData } from "react-router-dom";

export default function UserPage() {
  // 直接获取 loader 返回的数据
  const user = useLoaderData();

  return (
    <div>
      <h1>用户信息</h1>
      <p>姓名：{user.name}</p>
      <p>邮箱：{user.email}</p>
      <img src={user.avatar} alt="用户头像" />
    </div>
  );
}

五、参数与返回值

参数：无。

返回值：由当前路由的 loader 函数返回的数据（类型不限）。

六、注意事项

6.1、必须与路由 loader 绑定

只有在路由配置中定义了 loader，useLoaderData 才能获取到数据。

6.2、数据作用域

数据与当前路由关联，切换路由时数据会自动更新。

6.3、类型安全

默认情况下，useLoaderData 返回 unknown 类型（TypeScript）。建议通过类型断言 或 loader 类型定义明确数据类型：

// TypeScript 示例
const user = useLoaderData() as UserType;

6.4、错误处理

若 loader 抛出错误（如 throw new Response()），需通过 React Router 的错误边界处理。

示例：在路由配置中添加 errorElement：

{
  path: "/user/:userId",
  element: <UserPage />,
  loader: userLoader,
  errorElement: <ErrorPage />, // 自定义错误页面
}

6.5、依赖关系

loader 在以下情况重新执行：

路由参数变化（如从 /user/1 跳转到 /user/2）。

通过 useNavigation().formAction 或 useRevalidator() 手动触发重新验证。

七、高级用法：嵌套数据与重定向

7.1、 嵌套路由共享数据

// 父路由 loader
export async function parentLoader() {
  return { appVersion: "1.0.0" };
}

// 子路由组件中可直接访问父级 loader 数据
function ChildComponent() {
  const parentData = useLoaderData(); // 获取父路由的 loader 数据
  return <div>版本：{parentData.appVersion}</div>;
}

7.2、 在 Loader 中重定向

export async function authLoader({ request }) {
  const isLoggedIn = checkUserAuth();

  // 未登录时重定向到登录页
  if (!isLoggedIn) {
    throw redirect("/login");
  }

  return fetchProtectedData();
}

八、完整案例：博客文章列表

8.1、 Loader 函数（获取文章列表）

// src/routes/postsLoader.js
export async function postsLoader() {
  const response = await fetch("/api/posts");
  const posts = await response.json();
  return { posts };
}

8.2、路由配置

// src/main.jsx
const router = createBrowserRouter([
  {
    path: "/posts",
    element: <PostsPage />,
    loader: postsLoader,
    errorElement: <ErrorPage />,
  },
]);

8.3、 组件渲染

// src/PostsPage.jsx
import { useLoaderData } from "react-router-dom";

export default function PostsPage() {
  const { posts } = useLoaderData();

  return (
    <div>
      <h1>所有文章</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

十、最佳实践

10.1、分离数据逻辑

将 loader 函数单独放在 routes/ 目录中，保持组件专注于渲染。

10.2、缓存与优化

使用 shouldRevalidate 控制数据重新加载条件，避免不必要的请求。

10.3、加载状态提示

配合 useNavigation 显示加载动画：

function PostsPage() {
  const { posts } = useLoaderData();
  const navigation = useNavigation();

  if (navigation.state === "loading") {
    return <Spinner />;
  }

  return /* 渲染文章列表 */;
}

useLoaderData，可以 实现数据加载与 UI 渲染的分离，让代码更清晰、更易维护。尤其适合中大型应用中需要统一管理数据请求的场景。