Next.js 13.4.19中useRouter路由不保留历史记录问题求助

可能的触发原因 #

• router.push调用逻辑不规范，比如组件渲染时重复执行跳转，导致浏览器历史栈被错误覆盖
• Next.js 13中App Router（app目录）与Pages Router（pages目录）混用，引发路由历史管理冲突
• 第三方脚本（如广告、统计工具）意外修改了浏览器历史栈
• 13.4.19版本存在的路由历史栈相关已知Bug

具体修复方案 #

1. 规范路由跳转代码 #

避免在组件渲染周期内直接调用router.push，添加路由判断防止重复入栈：

import { useRouter } from 'next/router';

const handleNavigate = () => {
  if (router.pathname !== '/target-page') {
    router.push('/target-page');
  }
};

2. 统一路由体系 #

Next.js 13的App Router和Pages Router路由逻辑不兼容，需统一使用其中一种：

• Pages Router项目：坚持使用next/router的useRouter
• App Router项目：替换为next/navigation的useRouter

3. 临时修复：监听popstate事件 #

若上述方法无效，可手动拦截浏览器返回事件，强制维护路由历史：

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

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    const handlePopState = (event) => {
      event.preventDefault();
      router.back();
    };

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

  return <div>...</div>;
};

4. 升级Next.js版本 #

13.4.19的路由模块存在已知缺陷，升级到最新13.x稳定版可修复多数历史栈相关问题。

5. 排查第三方脚本干扰 #

检查页面中嵌入的第三方脚本，确认是否存在修改history对象的代码，这类脚本可能会意外重置浏览器历史记录。

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