Next.js路由变更前用自定义确认弹窗阻断路由的问题咨询

Next.js Pages Router 提供的routeChangeStart事件回调是同步执行的，原生window.confirm属于阻塞式同步API，调用时会冻结JS主线程直到用户操作，因此回调内直接抛错可以即时阻断路由流程。但自定义确认弹窗是异步非阻塞组件，触发弹窗显示后回调会直接执行完毕，路由不会等待用户的异步操作结果，自然会直接完成跳转。

核心逻辑：所有脏表单状态下的路由跳转先同步阻断，缓存目标路由地址并唤起弹窗，等用户操作后再手动决定是放行跳转还是停留当前页。
具体实现步骤：

• 新增状态存储待跳转路由、控制弹窗显隐

// 缓存需要跳转的目标路由地址
const [pendingRoute, setPendingRoute] = React.useState<string | null>(null);
// 控制自定义确认弹窗的显示/隐藏
const [showConfirmModal, setShowConfirmModal] = React.useState(false);

• 改写路由变更监听回调，同步拦截跳转
  回调内判断表单处于未保存状态且没有待处理路由时，第一时间缓存目标地址、唤起弹窗、关闭NProgress加载条，同步抛出错误阻断本次路由跳转，全程不加入任何异步等待逻辑。pendingRoute的判断是为了避免后续手动放行跳转时触发死循环。

const onRouteChangeStart = React.useCallback((targetUrl: string) => {
  if (formState.isDirty && !pendingRoute) {
    setPendingRoute(targetUrl);
    setShowConfirmModal(true);
    NProgress.done();
    // 同步抛错立刻终止本次路由跳转
    throw new Error("Abort route change, wait for user confirmation");
  }
}, [formState.isDirty, pendingRoute]);

• 绑定弹窗操作的回调逻辑
  • 用户点击确认离开：关闭弹窗，手动调用路由方法跳转到之前缓存的目标地址，跳转完成后清空缓存的路由
  • 用户点击取消离开：关闭弹窗，清空缓存的目标路由，停留在当前页

// 确认离开回调
const handleConfirm = () => {
  setShowConfirmModal(false);
  if (pendingRoute) {
    Router.push(pendingRoute);
    setPendingRoute(null);
  }
};

// 取消离开回调
const handleCancel = () => {
  setShowConfirmModal(false);
  setPendingRoute(null);
};

• 补充浏览器原生行为拦截
  除了Next.js内部的路由跳转，还要监听beforeunload事件，覆盖用户点击浏览器前进/后退、关闭标签页、刷新页面的场景：

React.useEffect(() => {
  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
    if (formState.isDirty) {
      e.preventDefault();
      e.returnValue = "";
    }
  };

  window.addEventListener("beforeunload", handleBeforeUnload);
  Router.events.on("routeChangeStart", onRouteChangeStart);

  return () => {
    window.removeEventListener("beforeunload", handleBeforeUnload);
    Router.events.off("routeChangeStart", onRouteChangeStart);
  };
}, [onRouteChangeStart, formState.isDirty]);

• 最后把showConfirmModal、handleConfirm、handleCancel三个属性传给自定义确认弹窗组件即可。

• 如果使用Next.js 13+ App Router，替换掉Pages Router的Router.events，使用useRouter钩子提供的路由拦截能力即可，核心逻辑不变：先同步拦截存目标地址，异步确认后手动放行。
• 如果跳转地址携带query参数、hash锚点，缓存targetUrl时要保留完整路径信息，避免跳转后参数丢失。
• 确认跳转前可以主动重置表单的dirty状态，避免跳转过程中重复触发拦截逻辑。

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