防止用户误切页面导致输入的内容丢失

阻止浏览器窗口关闭或者刷新

需要监听事件 Window: beforeunload event

代码示例：

useEffect(() => {
  const handleBeforeunload = (event: any) => {
    if (shouldPreventUnload) {
      var msg = 'must set some words';
      (event || window.event).returnValue = msg;
     return msg;
    }
  };
  window.addEventListener('beforeunload', handleBeforeunload);
  return () => {
    window.removeEventListener('beforeunload', handleBeforeunload);
  };
},[])

效果

React SPA 项目阻止 react-router 的路由切换

代码示例：

// 在需要保持的组件内使用

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

const shouldPreventUnload = true

<Prompt
  when={shouldPreventUnload}
  message='内容尚未保存，确定要放弃修改？'
/>

效果