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，可以有效提升涉及敏感操作页面的用户体验，但需权衡其潜在风险。