React Router V6中Prompt组件已被废弃，其对应的替代方案是什么？

状态确认 #

你提到的<Prompt>组件、usePrompt、useBlocker钩子确实已从React Router v6正式版中移除。该类API不属于永久废弃，是官方认为原有实现存在较多边界场景兼容问题，目前正在重构，后续版本可能会重新上线，当前v6正式版未内置相关稳定能力。

替代实现方案 #

方案1：使用官方实验性API（快速兼容原有逻辑） #

目前React Router v6最新版本提供了实验性的unstable_useBlocker和unstable_usePromptAPI，用法和原有API基本一致，仅新增了unstable_前缀：

import { unstable_usePrompt as usePrompt } from 'react-router-dom';

// 用法与原有Prompt逻辑完全匹配
usePrompt({
  message: "您确定要离开当前页面吗？",
  when: true // 传入布尔值控制是否开启拦截
});

你也可以自行封装为原有<Prompt>组件的用法：

import { unstable_usePrompt } from 'react-router-dom';

const Prompt = ({ when, message }) => {
  unstable_usePrompt({ message, when });
  return null;
}

// 调用方式和旧版完全一致
<Prompt when={formHasUnsavedChanges} message="您还有未保存的更改，确定要离开吗？" />

注意：该API目前标注为不稳定，后续正式发布后可能仅调整命名，功能逻辑基本稳定，普通业务场景可以正常使用。

方案2：纯手动实现（不依赖实验性API，稳定性更高） #

核心逻辑分为拦截浏览器页面刷新/关闭、拦截React Router内部路由跳转两部分，无需依赖任何实验性能力：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const useCustomPrompt = (when, message) => {
  const navigate = useNavigate();

  // 拦截浏览器刷新、关闭标签页行为
  useEffect(() => {
    if (!when) return;
    const handleBeforeUnload = (e) => {
      e.preventDefault();
      e.returnValue = message;
      return message;
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [when, message]);

  // 拦截React Router内部路由跳转行为
  useEffect(() => {
    if (!when) return;
    const unblock = navigate.block((tx) => {
      if (window.confirm(message)) {
        unblock();
        tx.retry();
      }
    });
    return unblock;
  }, [when, message, navigate]);
}

// 封装为组件后的调用方式和旧版完全一致
const Prompt = ({ when, message }) => {
  useCustomPrompt(when, message);
  return null;
}

内容的提问来源于stack exchange，提问作者Praveen Rao Chavan.G