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

news2025/5/20 14:24:27

一、前言

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 /* 渲染文章列表 */;
}