表單重新提交

當你在 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