javascript - 想要使用 next.js 为浏览器的后退按钮提供事件处理程序

Question

我有一个模式，它在打开时将哈希推送到 url example.com/#modal ，在浏览器后退按钮单击时，我想识别该事件，以便我可以切换模式的状态。关键是，由于我将它与 next.js(服务器端渲染)一起使用，我将无法访问窗口对象(如果我错了，请纠正我)。所以我需要另一种方法来处理浏览器后退按钮的事件。

Answer 1

添加到 Artinium's answer为您的案例提供一个实际示例，您可以使用 next/router的 beforePopState 对 session 历史导航的更改(后退/前进操作)采取行动，并确保它只会在离开当前页面时发生。

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.