当前位置：首页 > web >正文

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

web 2025/5/16 6:49:07

一、前言

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 }) {// 从路由参数中获取 userIdconst 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 /* 渲染文章列表 */;
}