表单重复提交

在 Remix 中使用 `<Form method="post">` 而不是使用原生 HTML `<form method="post">` 时，Remix 不会遵循浏览器在导航事件（例如点击后退、前进或刷新）期间重复提交表单的默认行为。

浏览器的默认行为

在标准浏览器环境中，表单提交是导航事件。这意味着当用户点击后退按钮时，浏览器通常会重新提交表单。例如

1. 用户访问 ` /buy`
2. 提交表单到 ` /checkout`
3. 导航到 ` /order/123`

浏览器历史堆栈如下所示

GET /buy > POST /checkout > *GET /order/123

如果用户点击后退按钮，历史记录变为

GET /buy - *POST /checkout < GET /order/123

在这种情况下，浏览器会重新提交表单数据，这可能会导致一些问题，例如信用卡被重复扣款。

从 `action` 中重定向

避免此问题的常见做法是在 POST 请求后发出重定向。这会从浏览器的历史记录中删除 POST 操作。历史堆栈将如下所示

GET /buy > POST /checkout, Redirect > GET /order/123

使用这种方法，点击后退按钮不会重新提交表单

GET /buy - *GET /order/123

需要考虑的具体场景

虽然在 Remix 中意外重复提交通常不会发生，但某些特定情况下可能会发生。

• 您使用了 `<form>` 而不是 `<Form>`
• 您使用了 `<Form reloadDocument>`
• 您没有渲染 `<Scripts/>`
• 用户禁用了 JavaScript
• 提交表单时 JavaScript 尚未加载

建议从 action 中实现重定向以避免意外重复提交。

其他资源

指南

• 表单验证

API

• <Form>
• useActionData
• redirect