React Router 中的 unstable_usePrompt 是一個用于在用戶嘗試離開當前頁面時觸發確認提示的自定義鉤子，常用于防止用戶誤操作導致數據丟失（例如未保存的表單）。

一、unstable_usePrompt用途

防止意外離開頁面：當用戶在當前頁面有未保存的變更時，阻止直接離開。

自定義提示消息：允許開發者指定瀏覽器默認確認對話框中顯示的消息。

二、unstable_usePrompt 基本使用

import { unstable_usePrompt } from "react-router-dom";function EditForm() {const [inputValue, setInputValue] = useState("");const [isDirty, setIsDirty] = useState(false);// 啟用提示：當 isDirty 為 true 時觸發提示unstable_usePrompt({when: isDirty,message: "您有未保存的更改，確定要離開嗎？",});const handleInputChange = (e) => {setInputValue(e.target.value);setIsDirty(true); // 標記為有未保存的更改};const handleSubmit = () => {// 提交數據后重置狀態setIsDirty(false);};return (<div><input type="text" value={inputValue} onChange={handleInputChange} /><button onClick={handleSubmit}>保存</button></div>);
}

三、unstable_usePrompt 參數說明

參數
when：Boolean類型 控制是否啟用提示。當為 true 時，用戶嘗試離開頁面會觸發確認對話框。
message： String類型 用戶離開時顯示的提示消息（部分瀏覽器可能忽略自定義消息，使用默認文案）。

四、unstable_usePrompt注意事項

4.1、API 穩定性

unstable_usePrompt 是實驗性 API，未來 React Router 版本可能重命名或移除。需關注官方更新。

4.2、瀏覽器兼容性

部分瀏覽器（如 Chrome）允許自定義提示消息，但某些場景（如頁面關閉）可能強制使用默認文案。

移動端瀏覽器可能限制自定義提示行為。

4.3、條件管理

確保 when 參數在適當的時候設置為 false（如數據提交后），避免錯誤攔截用戶導航。

4.4、路由上下文

組件必須位于 <BrowserRouter> 或路由上下文內部，否則鉤子無法正常工作。

五、unstable_usePrompt完整案例

import { unstable_usePrompt, Link } from "react-router-dom";function EditPage() {const [name, setName] = useState("");const [isDirty, setIsDirty] = useState(false);unstable_usePrompt({when: isDirty,message: "確定要放棄未保存的更改嗎？",});return (<div><h1>編輯用戶信息</h1><inputtype="text"value={name}onChange={(e) => {setName(e.target.value);setIsDirty(true); // 輸入后標記為未保存}}/><buttononClick={() => {// 模擬保存操作setIsDirty(false);}}>保存</button><Link to="/">返回首頁</Link></div>);
}

六、unstable_usePrompt 替代方案

如果擔心 API 不穩定，可用 useBeforeUnload 處理頁面關閉事件（但無法攔截應用內路由跳轉）：

import { useBeforeUnload } from "react-router-dom";useBeforeUnload(() => {if (isDirty) {return "您有未保存的更改！";}
});

注意：unstable_usePrompt，可以有效提升涉及敏感操作頁面的用戶體驗，但需權衡其潛在風險。