React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例
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，可以有效提升涉及敏感操作页面的用户体验，但需权衡其潜在风险。