问题描述
在我的react应用中，页面之一中有一个弹出窗口。现在，当弹出窗口打开并且用户按下浏览器的后退按钮时，用户将被带到上一页，而我只是想关闭弹出窗口。
我已经遵循了很多与此相关的解决方案，但似乎没有一个可行。下面的代码允许我关闭背面的弹出窗口，但是它的作用是在存在弹出窗口的页面的历史记录中推送一个额外的URL。因此，一旦弹出窗口关闭，我需要按两次以实际进入上一页。这样会带来糟糕的用户体验，因此我不想将其添加到我的应用中。
const myPopState = (event) => {
window.history.go(1);
closeModal();
};
useEffect(() => {
window.history.pushState(null,null,location.href);
window.addEventListener("popstate",myPopState);
return () => window.removeEventListener("popstate",myPopState);
},[]);
PS：我不想为弹出屏幕设置一条单独的路线。已经有一个similar问题，但是我不愿意为弹出窗口设置唯一的路径，所以问这个。
解决方法
将弹出窗口保留为单独的组件并将其导入到您想要的任何文件中。然后简单地使用状态来管理弹出框的隐藏/显示。
看看我对这个问题的回答。