React Router 中的 Actions 机制详解-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00322/article/details/148324553

React Router 中的 Actions 机制详解

react-router remix-run/react-router: 是一个开源的 React 路由库，用于构建 React 应用的路由系统。它提供了一套简洁的 API 和多种路由模式，可以帮助开发者快速实现路由功能，提高应用的可维护性。特点包括易于使用、模块化设计、支持多种路由模式等。项目地址: https://gitcode.com/gh_mirrors/re/react-router

什么是 Actions

在 React Router 中，Actions 是处理数据变更的核心机制。它允许开发者通过路由定义数据修改操作，当 Action 执行完成后，系统会自动重新验证页面上的所有加载器(loader)数据，保持 UI 与数据的同步，而无需手动编写同步代码。

Actions 的两种类型

React Router 提供了两种类型的 Actions，分别适用于不同的运行环境：

1. 客户端 Actions (Client Actions)

客户端 Actions 仅在浏览器中执行，当同时定义了客户端和服务器 Action 时，客户端 Action 会优先执行。

export async function clientAction({ request }) {
  // 从请求中获取表单数据
  const formData = await request.formData();
  const title = formData.get("title");
  
  // 调用API更新项目
  const project = await someApi.updateProject({ title });
  return project;
}

特点：

完全在浏览器端执行
适合处理不需要服务器参与的轻量级数据变更
可以快速响应用户操作，减少网络延迟

2. 服务器 Actions (Server Actions)

服务器 Actions 仅在服务器端执行，并且会从客户端打包中移除。

export async function action({ request }) {
  const formData = await request.formData();
  const title = formData.get("title");
  
  // 直接操作数据库
  const project = await fakeDb.updateProject({ title });
  return project;
}

特点：

完全在服务器端执行
适合处理敏感数据操作或需要访问数据库的操作
代码不会暴露给客户端，提高安全性

调用 Actions 的三种方式

React Router 提供了多种方式来触发 Actions 的执行：

1. 使用 Form 组件声明式调用

<Form action="/projects/123" method="post">
  <input type="text" name="title" />
  <button type="submit">提交</button>
</Form>

特点：

最直观的调用方式
会自动处理表单序列化
会触发页面导航并添加浏览器历史记录

2. 使用 useSubmit 命令式调用

const submit = useSubmit();

// 在定时器回调中提交数据
submit(
  { quizTimedOut: true },
  { action: "/end-quiz", method: "post" }
);

特点：

适合需要在特定事件或条件触发时提交数据
同样会触发页面导航
可以灵活控制提交时机

3. 使用 Fetcher 调用

const fetcher = useFetcher();

<fetcher.Form method="post" action="/update-task/123">
  <input type="text" name="title" />
  <button type="submit">
    {fetcher.state !== "idle" ? "保存中..." : "保存"}
  </button>
</fetcher.Form>

特点：