运行npm start启动项目报错：react-router未导出'Prompt'如何解决？

你遇到的导入错误是react-router v6及以上版本移除了原v5内置的Prompt组件导致的，v6正式版发布后该组件就从官方导出项中删除了。

你可以根据你的项目需求选择以下任意一种方案解决：

• 方案1：降级到react-router v5版本 #

  如果你不想改动现有用到Prompt的业务代码，直接降级到v5版本即可快速修复问题，执行以下安装命令：

  # npm用户执行
  npm install react-router-dom@5 react-router@5
  # yarn用户执行
  yarn add react-router-dom@5 react-router@5
  

  安装完成后重新运行npm start即可正常启动项目。

• 方案2：保留v6版本，替代实现原有功能 #

  如果你需要使用v6的新特性不想降级，可以用以下两种方式实现原Prompt的页面离开确认效果：

  方式1：使用官方实验性API #

  v6.4及以上版本提供了实验性的unstable_usePrompt接口，可直接替代原有功能，用法示例：

  // 先导入并重命名，避免后续API稳定后改动太大
  import { unstable_usePrompt as usePrompt } from 'react-router-dom';
  
  // 组件内使用
  usePrompt({
    when: isFormUncompleted, // 布尔值，控制是否需要阻塞导航
    message: '当前存在未保存的内容，确定要离开该页面吗？'
  })
  

  方式2：手动实现自定义阻塞逻辑 #

  如果你不想使用不稳定的实验API，可以自行封装逻辑实现相同效果，示例代码如下：

  import { useEffect, useCallback } from 'react';
  import { useNavigate } from 'react-router-dom';
  
  // 自定义离开确认Hook
  const useCustomPrompt = (shouldBlock, tipMessage) => {
    const navigate = useNavigate();
  
    // 监听浏览器刷新、关闭页面事件
    const handleBeforeUnload = useCallback((e) => {
      if (!shouldBlock) return;
      e.preventDefault();
      e.returnValue = tipMessage;
      return tipMessage;
    }, [shouldBlock, tipMessage]);
  
    // 监听react-router路由跳转事件
    useEffect(() => {
      if (!shouldBlock) return;
      const unblock = navigate.block((transition) => {
        if (window.confirm(tipMessage)) {
          unblock();
          transition.retry();
        }
      });
      return unblock;
    }, [shouldBlock, tipMessage, navigate]);
  
    useEffect(() => {
      window.addEventListener('beforeunload', handleBeforeUnload);
      return () => window.removeEventListener('beforeunload', handleBeforeUnload);
    }, [handleBeforeUnload]);
  };
  
  // 业务组件内调用
  useCustomPrompt(hasUnsavedChanges, '您有未保存的修改，确认离开吗？');
  

内容的提问来源于stack exchange，提问作者Cherry