React 第四十一节Router 中 useActionData 使用方法案例以及注意事项

一、useActionData前言

useActionData 是 React Router 提供的一个钩子函数，用于获取在路由的 action 函数中返回的数据。它通常与表单提交（通过 <Form> 组件）配合使用，用于处理表单提交后的服务器响应数据（如错误信息、成功状态等）。

二、useActionData核心用途

处理表单提交结果：获取表单提交后服务器返回的数据（例如验证错误、成功消息等）。
动态反馈用户：根据 action 返回的数据更新 UI（如显示错误提示）。
简化数据流：无需手动管理状态，直接通过路由 action 获取数据。

三、useActionData基本流程

用户提交表单（通过 <Form> 组件）。
路由的 action 函数处理提交数据（例如发送到服务器）。
action 返回数据（如错误对象、成功状态）。
组件通过 useActionData() 获取该数据并渲染反馈。

四 useActionData示例：用户登录表单

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

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

const router = createBrowserRouter([
  {
   
   
    path: "/login",
    element: <LoginPage />,
    action: loginAction, // 处理表单提交的 action 函数
  },
]);

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

4.2、 定义 Action 函数（处理表单提交）

// src/LoginPage.jsx
export async function