Next.js 成功页面中无法拦截浏览器后退按钮按下

Question

我目前正在开发一个 Next.js 应用程序，我为已完成付款的用户实现了一个成功页面。我想通过拦截后退按钮按下并将其重定向到主页来阻止用户导航回支付页面。

我尝试过以下方法但没有成功：

• 利用 popstate 事件监听器。
• 使用 beforeunload 事件监听器。
• 使用 history.replaceState 和 history.pushState 操作浏览器历史记录。

尽管做出了这些努力，按下后退按钮并未触发指定的处理功能。我已确认成功页面正在呈现，并且页面上的其他功能按预期工作。

 useEffect(() => {
    const handleBackButton = () => {
      router.push('/');
    };

    history.replaceState(null, null, location.href);

    window.addEventListener('popstate', handleBackButton);

    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, [router]);

在上面的代码中，handleBackButton从未被调用，我正在重定向到作为第三方支付网关的支付页面。

我已经尝试过 router.beforePopState，但我的案例也从未被调用过。

我正在使用 Next.js 版本 13.5.0。

预期结果：

我希望当用户按下成功页面上的后退按钮时，他们应该被重定向到主页。但是，handleBackButton函数没有被调用。

Answer 1

在同样的情况下我使用了 router.replace() 而不是 router.push()

Answer 2

好吧，这很有趣......

在新选项卡中继续stackoverflow
打开 Inspect Element 并将以下代码粘贴到控制台中：

const stateObj={foo:"bar"}
window.onbeforeunload=function(){
  let url="https://stackoverflow.com/questions/77835092"
  history.replaceState(history.state||stateObj,"",url)
}

然后在仪表板上单击一个随机问题，然后单击back，它将重定向到这个问题...因此，至少使用replaceState，似乎您必须在用户进入他们将按下的另一个页面之前设置它返回开启