显示默认浏览器对话框以防止用户返回

如何解决显示默认浏览器对话框以防止用户返回

我知道已经有人问过很多关于此的问题，但我正在努力寻找我需要的东西。我正在使用 react-router 5.1.2 来管理我的网络应用程序中的导航。我想在用户离开页面之前提醒他。当用户按下浏览器的后退按钮时，Attach beforeUnload listener 不起作用。我知道我可以使用 history.block() 或 <Prompt>，但警报的行为与触发 beforeUnload 时显示的默认警报不同，例如我可以按两次后退按钮，然后按“取消”，并且路由和实际渲染的组件之间存在不一致。问题是：我如何提醒用户按下后退按钮，以获取作为默认对话框的确认对话框（防止警报建议的操作之外的其他操作）？

这是我目前使用的自定义钩子：

const alertUser = (e: BeforeUnloadEvent | PopStateEvent) => {
  e.preventDefault();
  e.returnValue = '';
};
export const useAlertBeforeLeaving = (showAlert = true) => {
  const history = useHistory();
  const unblock = useRef<UnregisterCallback | null>(null);

  useEffect(() => {
    if (showAlert) {
      window.addEventListener('beforeunload',alertUser);
      unblock.current = history.block('Leave the page?');
    }
    return () => {
      if (showAlert && unblock.current) {
        window.removeEventListener('beforeunload',alertUser);
        unblock.current();
      }
    };
  },[history,showAlert]);
};