希望在next.js中有一个浏览器后退按钮的事件处理程序

2eafrhcq  于 2023-03-02  发布在  其他
关注(0)|答案(4)|浏览(213)

我有一个模态,而打开推一个哈希到url example.com/#modal,在浏览器后退按钮点击,我想认识到这一事件,以便我可以切换模态的状态。重点是,因为我使用它与next.js(服务器端渲染),我将无法访问窗口对象(纠正我,如果我错了)。所以我需要一个替代的方式来处理浏览器后退按钮的事件。

ef1yzkbh

ef1yzkbh1#

您可以使用next/routerbeforePopState对会话历史导航的更改进行操作(后退/前进操作),并确保它只在离开当前页面时发生。

useEffect(() => {
    router.beforePopState(({ as }) => {
        if (as !== router.asPath) {
            // Will run when leaving the current page; on back/forward actions
            // Add your logic here, like toggling the modal state
        }
        return true;
    });

    return () => {
        router.beforePopState(() => true);
    };
}, [router]); // Add any state variables to dependencies array if needed.
z5btuh9x

z5btuh9x2#

@Summy我希望你的问题现在已经解决了。如果没有,你可以尝试这个浏览器后退按钮:- Next.js + React返回上一页如果你想使用哈希绑定URL,你不能使用SSR,因为/#和/#/one是相同的路由服务器端,所以服务器没有办法知道要呈现什么,它需要发送一个基本的模板,让客户端填充它,在这种情况下,我认为使用CRA或Parcel与React路由器及其HashRouter是一个更好的选择,这样你就有一个单一的index.html,让客户端决定要呈现什么。

1zmg4dgp

1zmg4dgp3#

在NextJs中,我们可以使用beforePopState函数并执行我们想要的操作,例如关闭模态或显示模态或检查返回地址并决定要执行的操作
https://stackoverflow.com/a/60702584/4717739
https://stackoverflow.com/a/69560739/4717739

mnemlml8

mnemlml84#

我已经尝试了上述解决方案,但不幸的是没有为我工作。我已经设法克服以下情况下给定的问题:在浏览器上打开模态“返回”操作。我有问题,当我点击返回按钮,我得到打开模态,但当前的网址被更改为以前的网址。

export default function BrowserGoBackAction() {

const [showGoBackDialog, setShowGoBackDialog] = useState(false);

  const router = useRouter();

  async function OpenGoBackDialog() {
    setShowGoBackDialog(true);
  }

  useEffect(() => {
    router.beforePopState(({ as }) => {
      //   Detect browsers go back action
      if (as !== router.asPath) {
        window.history.pushState(null, null, router.asPath);
        OpenGoBackDialog();
      }
    });
  });

  function goToPreviousPage() {
    router.beforePopState(() => true);
    return router.back();
  }

  function onCancel() {
    setShowGoBackDialog(false);
  }
}

相关问题