在 Next.tjs 中返回浏览器时显示自定义模式答案

【问题标题】：Show custom modal when back browser in Next.tjs在 Next.tjs 中返回浏览器时显示自定义模式
【发布时间】：2021-09-14 14:31:23
【问题描述】：

用户返回浏览器时如何显示模态？

现在，如果我使用 JavaScript 中的警报，它可以工作，但是当我想显示自定义模式组件时，它就不起作用了。

此代码不起作用。

const [showModal, setShowModal] = useState(false);

useEffect(() => {
    window.history.pushState(null, '', document.URL);
    window.addEventListener('popstate', () => {
        setShowModal(true);
    });
}, []);

// inside jsx
{ showModal && <ModalComponent /> }

这是代码作品

useEffect(() => {
    window.history.pushState(null, '', document.URL);
    window.addEventListener('popstate', () => {
        alert("Modal!")
    });
}, [])

谢谢。

【问题讨论】：

@juliomalves 好的，我已经用最新的代码更新了帖子，但它不起作用。

标签： next.js modal-dialog

【解决方案1】：

好的，我找到了解决方案，如果有人遇到同样的问题，也许这可以提供帮助。

const [showModal, setShowModal] = useState(false);

useEffect(() => {
  router.beforePopState(() => { 
    setShowModal(true);
    history.go(1); 
    return false; 
  });
}, []);

//在jsx里面

{ showModal && <ModalComponent /> }

【讨论】：