当用户在浏览器模式中确认时导航回来

Question

我试图在用户使用浏览器中的后退按钮时提醒用户未保存的更改，并且当用户在确认模式上单击取消但当他们单击确定以确认他们想要 go 返回页面时它不会工作 go 返回。

这些是我处理回来的功能：

 const handleBrowserBackBtn = () => {
        handleBackClick();
        window.history.pushState(null, document.title, window.location.href);
    }

    useLayoutEffect(() => {
        window.history.pushState(null, document.title, window.location.href);
        window.addEventListener("popstate", handleBrowserBackBtn);
        return () => {
          window.removeEventListener("popstate", handleBrowserBackBtn);
        };
      });

    const handleBackClick = () => {
        if(addingNew || editing){
            if(confirm("You have unsaved changes. Are you sure you want to go back?")){
                window.location.back()
            };
        }
    }

我正在尝试将用户发送回主屏幕。 但是我得到了这个无限循环的确认弹出。

Answer 1

尝试将其用于您的应用程序：