Form Resubmissions

表单重新提交

当您在 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 尚未加载

建议从操作中实施重定向，以避免意外的重新提交。

其他资源

指南

• 表单验证

API

• <Form>
• useActionData
• redirect