如何在React Router Dom单个路由中使用多个action？

React Router的路由配置里，action字段只能接收单个函数，你之前尝试的重复定义action（对象属性会被覆盖）或者传递数组（不符合类型要求）都是不被支持的，这就是你遇到报错的核心原因。

要在同一个路由下处理来自不同表单的提交，你需要创建一个统一的入口action函数，在内部根据表单提交的标识分发到对应的处理逻辑，具体实现方式如下：

步骤1：给表单添加区分标识 #

在两个表单组件中，通过隐藏字段给提交数据加入唯一标识，让统一action能识别请求来源：

// 第一个表单组件
<Form method="post" action="/show-result">
  <input type="hidden" name="formSource" value="firstForm" />
  {/* 其他表单字段 */}
  <button type="submit">提交表单1</button>
</Form>

// 第二个表单组件
<Form method="post" action="/show-result">
  <input type="hidden" name="formSource" value="secondForm" />
  {/* 其他表单字段 */}
  <button type="submit">提交表单2</button>
</Form>

步骤2：创建统一的路由Action #

在路由配置中使用这个统一的action函数，内部根据formSource的值调用对应的原有处理逻辑：

import { redirect } from "react-router-dom";

// 原有的两个独立action函数
async function actionFromFirstComponent({ request }) {
  const formData = await request.formData();
  // 处理表单1的业务逻辑
  return redirect("/show-result");
}

async function actionFromSecondComponent({ request }) {
  const formData = await request.formData();
  // 处理表单2的业务逻辑
  return redirect("/show-result");
}

// 统一的入口action函数
async function unifiedShowResultAction({ request }) {
  const formData = await request.formData();
  const formSource = formData.get("formSource");

  switch (formSource) {
    case "firstForm":
      return await actionFromFirstComponent({ request });
    case "secondForm":
      return await actionFromSecondComponent({ request });
    default:
      // 处理未知表单提交的情况
      return redirect("/");
  }
}

// 最终路由配置
{
  path: "/show-result",
  element: <ShowResult />,
  action: unifiedShowResultAction
}

可选方案：使用formAction拆分路由 #

如果可以接受URL路径变化，也可以给表单提交按钮设置formAction属性，将不同表单的提交请求导向路由的子路径，拆分处理逻辑：

// 表单1的提交按钮
<button type="submit" formAction="/show-result/first">提交表单1</button>

// 表单2的提交按钮
<button type="submit" formAction="/show-result/second">提交表单2</button>

// 路由配置
{
  path: "/show-result",
  element: <ShowResult />,
  children: [
    { path: "first", action: actionFromFirstComponent },
    { path: "second", action: actionFromSecondComponent }
  ]
}

这种方式无需额外的标识字段，但会改变提交后的URL路径，适合对路径无严格要求的场景。

内容的提问来源于stack exchange，提问作者Abid Hasan