如何解决反应路由器阻止路由更改并关闭后退按钮上的弹出窗口
在我的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问题,但是我不愿意为弹出窗口设置唯一的路径,所以问这个。
解决方法
将弹出窗口保留为单独的组件并将其导入到您想要的任何文件中。然后简单地使用状态来管理弹出框的隐藏/显示。
看看我对这个问题的回答。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。