reactjs - 如何使用反应挂钩设置离开警告？

Question

我正在制作一个需要显示进度的应用程序，如果您反击，将会丢失。

我确实使用了 useEffect 钩子：

 useEffect(() => {
        return () => {
          showWarning();
        }
  }, [])

我可以使用哪个功能来停止此返回操作，以便显示警告并确认？

Answer 1

如果您使用的是react-router，则Prompt必须处理这种行为。您在这里有更多信息：https ://reactrouter.com/core/api/Prompt

Answer 2

“我可以使用哪个函数来停止此返回操作”如果您的意思是您希望阻止浏览器完成其操作，那么这不是设计应用程序的方式，带有 return 语句的 useEffect 用于清理工作而不是用于安装另一个组件或显示消息

您可以改为使用该onbeforeunload事件并清理应用程序上的处理unmount程序，但它会向您显示一个弹出窗口，其中包含无法更改的默认消息

 useEffect(() => {
   function showWarning() {
     return '';
   }

   window.addEventListener('beforeunload', showWarning);

   return () => {
      window.removeEventListener('beforeunload', showWarning);
   }
 })