如何在Next.js中实现router.push后限制浏览器返回至确认页

针对你的需求，这里提供两种实用的实现方式，适配不同的Next.js路由体系：

方式一：在确认页跳转时修改历史记录（推荐） #

这种方式直接修改浏览器历史栈，把确认页的记录替换成错误页，用户点击返回按钮会直接跳转到错误页，无需额外监听事件。

假设确认页路径为/confirm，错误页路径为/error，代码示例如下：

import { useRouter } from 'next/router'; // Pages Router
// 如果是App Router，导入：import { useRouter } from 'next/navigation';

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

  const handleConfirm = async () => {
    // 先执行你的确认逻辑（比如表单提交、状态更新等）
    // ...

    // 跳转到首页
    await router.push('/');
    // 替换历史栈中的确认页记录为错误页
    history.replaceState(null, '', '/error');
  };

  return (
    <button onClick={handleConfirm}>确认</button>
  );
}

原理：当用户从确认页跳转到首页后，浏览器历史栈中原本的/confirm记录被替换成了/error，此时点击返回按钮就会直接导航到错误页，彻底绕过确认页。

方式二：在首页监听返回事件 #

如果无法修改确认页的跳转逻辑，可以在首页监听浏览器的popstate事件，判断返回目标是否为确认页，若是则重定向到错误页。

Pages Router 示例 #

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

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

  useEffect(() => {
    const handlePopState = () => {
      // 判断上一页是否为确认页（根据实际路径调整判断逻辑）
      const isFromConfirm = document.referrer.includes('/confirm');
      if (isFromConfirm) {
        // 跳转到错误页，用replace避免历史栈累积
        router.replace('/error');
      }
    };

    window.addEventListener('popstate', handlePopState);
    // 组件卸载时移除监听
    return () => window.removeEventListener('popstate', handlePopState);
  }, [router]);

  return (
    <div>首页内容</div>
  );
}

App Router（Next.js 13+）示例 #

注意需要标记为客户端组件：

'use client';

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

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

  useEffect(() => {
    const handlePopState = () => {
      if (document.referrer.includes('/confirm')) {
        router.replace('/error');
      }
    };

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

  return <div>首页内容</div>;
}

优化判断逻辑（可选） #

如果document.referrer不够可靠，可以在确认页跳转时携带查询参数：

// 确认页跳转时
await router.push('/?from=confirm');

然后首页根据参数判断：

useEffect(() => {
  const handlePopState = () => {
    if (router.query.from === 'confirm') {
      router.replace('/error');
    }
  };

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

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