Next.js 13中监听浏览器返回按钮事件的方案求助

Next.js 13 移除了旧版本的 beforePopState 函数，可通过以下两种场景的方案实现浏览器返回按钮监听：

一、Pages Router 场景 #

利用浏览器原生 popstate 事件，结合 Next.js 路由钩子实现：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function TargetPage() {
  const router = useRouter();

  useEffect(() => {
    const handleBackButton = (event) => {
      // 自定义返回逻辑，比如弹窗确认
      const confirmLeave = window.confirm('确定要返回上一页吗？');
      if (!confirmLeave) {
        // 阻止默认返回行为，需手动添加历史记录抵消返回操作
        history.pushState(null, '', window.location.href);
      }
    };

    window.addEventListener('popstate', handleBackButton);
    // 初始添加空历史记录，确保首次返回能触发事件
    history.pushState(null, '', window.location.href);

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

  return <div>Pages Router 页面内容</div>;
}

也可通过路由事件区分导航类型：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function TargetPage() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      // 判断是否为浏览器前进/返回触发的导航
      const isBackOrForward = navigation?.type === 'back_forward';
      if (isBackOrForward) {
        console.log('浏览器返回/前进按钮触发');
        // 执行自定义逻辑
      }
    };

    router.events.on('routeChangeStart', handleRouteChange);
    return () => router.events.off('routeChangeStart', handleRouteChange);
  }, []);

  return <div>Pages Router 页面内容</div>;
}

二、App Router 场景 #

App Router 下需使用客户端组件（添加 'use client' 指令），同样借助原生 popstate 事件：

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function TargetAppPage() {
  const router = useRouter();

  useEffect(() => {
    const handleBackButton = () => {
      console.log('浏览器返回按钮触发');
      // 自定义逻辑示例：强制跳转到指定页面而非默认返回
      // router.push('/custom-page');
      // 若需阻止默认返回，添加历史记录抵消
      // history.pushState(null, '', window.location.href);
    };

    window.addEventListener('popstate', handleBackButton);
    history.pushState(null, '', window.location.href);

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

  return <div>App Router 页面内容</div>;
}

注意事项 #

• popstate 事件会在浏览器前进、返回时均触发，若需仅监听返回，可结合 history.state 的变化做额外判断。
• 手动调用 history.pushState/replaceState 不会触发 popstate，仅浏览器导航按钮或 history.back()/forward() 会触发。
• App Router 中必须添加 'use client' 指令，否则无法使用客户端钩子和原生浏览器 API。

内容的提问来源于stack exchange，提问作者Keisuke Nagakawa 永川 圭介