Remix Form发送POST请求后自动发起GET请求问题排查

以下是几个常见原因和对应的解决方法：

1. Action函数返回值不正确 #

Remix的Form组件依赖action函数的返回结果控制页面行为。如果action没有返回null、redirect或符合要求的响应对象，浏览器可能会回退到默认表单提交逻辑，触发GET请求。

解决方式：
确保action函数返回正确响应，示例：

import { ActionArgs, redirect } from "@remix-run/node";

export async function action({ request }: ActionArgs) {
  // 处理POST请求逻辑，比如解析表单数据
  const formData = await request.formData();
  const data = Object.fromEntries(formData);

  // 处理完成后返回重定向或null
  return redirect("/success");
  // 或者返回null保持当前页面
  // return null;
}

2. Form组件配置或嵌套错误 #

• 未明确指定method="post"时，Form可能在某些场景下默认使用GET；
• 嵌套原生<form>标签会导致双重表单提交，触发默认GET请求。

解决方式：

• 显式设置Form的method属性：

  import { Form } from "@remix-run/react";
  
  export default function MyPage() {
    return (
      <Form method="post">
        {/* 表单内容 */}
        <button type="submit">提交</button>
      </Form>
    );
  }
  

• 移除所有嵌套的原生<form>标签，Remix Form本身已封装完整表单功能。

3. 全局事件监听干扰 #

项目中全局范围内的submit事件监听（比如在root组件或全局脚本中）可能绕过Remix的默认阻止逻辑，导致默认提交行为触发。

解决方式：

• 检查全局代码中是否有监听submit事件的逻辑，确保这些逻辑不会干扰Remix Form的处理；
• 若需自定义提交逻辑，使用Remix Form的onSubmit属性，按需处理事件：

  <Form 
    method="post"
    onSubmit={(event) => {
      // 自定义前置逻辑
      console.log("提交前处理");
      // 如需保留Remix默认提交流程，不要调用event.preventDefault()
      // 若完全自定义则需手动处理请求
    }}
  >
    {/* 表单内容 */}
  </Form>
  

4. Remix版本存在bug #

部分旧版本的Remix Form组件可能存在默认行为未正确阻止的bug。

解决方式：
升级到最新稳定版Remix：

npm install @remix-run/react@latest @remix-run/node@latest

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