Next.js 13.4中window.confirm阻止URL变更逻辑失效求助

你的代码无法生效有两个核心原因：

1. beforeunload 事件仅针对页面卸载场景（关闭标签页、刷新页面、跳转到外部站点），Next.js的客户端内部路由跳转不会触发该事件；
2. 现代浏览器对beforeunload有规范限制，不能主动调用window.confirm，必须遵循浏览器的默认提示逻辑。

下面分两种场景给出可行的实现方案：

场景1：处理页面卸载（关闭/刷新/外部跳转） #

针对页面卸载场景，需按照浏览器规范设置beforeunload事件，浏览器会自动弹出系统级确认提示：

'use client';
import { useEffect } from 'react';

export default function MyComponent() {
  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      // 必须调用preventDefault，同时设置returnValue为非空字符串
      event.preventDefault();
      event.returnValue = ''; // 内容会被浏览器替换为默认提示文本
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return <div>当前页面内容</div>;
}

场景2：处理Next.js客户端路由跳转（内部页面跳转） #

对于Next.js的客户端导航（Link组件、router.push/replace、浏览器前进后退），需要单独处理：

1. 自定义带确认的Link组件 #

拦截Link的点击事件，先弹出确认提示再决定是否跳转：

'use client';
import { useRouter } from 'next/navigation';

type ConfirmLinkProps = {
  href: string;
  children: React.ReactNode;
  confirmMsg?: string;
};

export function ConfirmLink({ href, children, confirmMsg = '确定要离开当前页面吗？' }: ConfirmLinkProps) {
  const router = useRouter();

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    if (window.confirm(confirmMsg)) {
      router.push(href);
    }
  };

  return <a href={href} onClick={handleClick}>{children}</a>;
}

2. 拦截浏览器前进后退 #

使用useRouter的beforePopState方法拦截浏览器的前进后退操作：

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

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

  useEffect(() => {
    const handleBackForward = () => {
      const allowNavigate = window.confirm('确定要离开当前页面吗？');
      return allowNavigate;
    };

    router.beforePopState(handleBackForward);

    return () => {
      // 组件卸载时清除拦截
      router.beforePopState(() => true);
    };
  }, [router]);

  return (
    <div>
      <ConfirmLink href="/target-page">跳转到目标页面</ConfirmLink>
    </div>
  );
}

3. 手动调用路由跳转时的确认 #

如果是通过代码手动调用router.push/replace，直接在调用前加确认逻辑：

const handleManualJump = () => {
  if (window.confirm('确定要离开当前页面吗？')) {
    router.push('/target-page');
  }
};

内容的提问来源于stack exchange，提问作者Victor Parenyuk