React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例

React Router 中的 unstable_usePrompt 是一个用于在用户尝试离开当前页面时触发确认提示的自定义钩子，常用于防止用户误操作导致数据丢失（例如未保存的表单）。

一、unstable_usePrompt用途

防止意外离开页面：当用户在当前页面有未保存的变更时，阻止直接离开。

自定义提示消息：允许开发者指定浏览器默认确认对话框中显示的消息。

二、unstable_usePrompt 基本使用

javascript 复制代码

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完整案例

javascript 复制代码

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>
      <input
        type="text"
        value={name}
        onChange={(e) => {
          setName(e.target.value);
          setIsDirty(true); // 输入后标记为未保存
        }}
      />
      <button
        onClick={() => {
          // 模拟保存操作
          setIsDirty(false);
        }}
      >
        保存
      </button>
      <Link to="/">返回首页</Link>
    </div>
  );
}

六、unstable_usePrompt 替代方案

如果担心 API 不稳定，可用 useBeforeUnload 处理页面关闭事件（但无法拦截应用内路由跳转）：

javascript 复制代码

import { useBeforeUnload } from "react-router-dom";

useBeforeUnload(() => {
  if (isDirty) {
    return "您有未保存的更改！";
  }
});

注意：unstable_usePrompt，可以有效提升涉及敏感操作页面的用户体验，但需权衡其潜在风险。