想要为浏览器的后退按钮设置一个事件处理程序，下一步.js

Question

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

Answer 1

要为您的案例添加一个实用示例来补充Artinium的答案，您可以使用 的 beforePopState 对会话历史记录导航的更改（后退/前进操作）采取行动，并确保它仅在离开当前页面时发生。next/router

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.

Answer 2

@Summy 我希望您的问题现在得到解决。如果没有，你可以试试浏览器后退按钮：- 下一步.js + React 返回上一页 如果你想使用hashbang URL，你不能使用SSR，因为/#和/#/one是相同的路由服务器端，所以服务器没有办法知道要渲染什么，它需要发送一个基本的模板，让客户端填写它， 在这种情况下，我认为将CRA或Parcel与React Router及其HashRouter一起使用是一个更好的选择，这样你就可以拥有一个索引.html并让客户端决定渲染什么。