Next.js中不导航向历史栈添加新路径的实现方法

问题原因 #

Next.js的路由系统（不管是App Router还是Pages Router）会维护独立的内部路由历史栈，和浏览器原生window.history栈需要保持状态同步。直接调用window.history.pushState只会修改浏览器的历史栈，但不会更新Next.js内部的路由状态，导致两者出现不一致：

• 第一次调用router.back()时，Next.js会尝试在自身内部栈中后退，但内部栈并没有新增的/my_new_route记录，因此不会触发页面跳转；
• 这次调用后，Next.js会尝试同步浏览器历史栈状态，第二次调用router.back()时，内部栈与浏览器栈才对齐，从而跳转到之前的路由。

解决方案 #

根据你的需求场景，分两种情况处理：

1. 路径对应Next.js已存在的页面

如果/my_new_route是项目中已定义的页面，直接使用Next.js官方路由方法添加历史记录，确保内部栈与浏览器栈同步：

• Pages Router：

  import { useRouter } from 'next/router';
  
  const router = useRouter();
  router.push('/my_new_route');
  

• App Router：

  import { useRouter } from 'next/navigation';
  
  const router = useRouter();
  router.push('/my_new_route');
  

之后调用router.back()就能正常从/my_new_route退回之前的路由。

2. 路径为虚拟路径（无对应页面）

如果/my_new_route是不需要渲染对应页面的虚拟路径，需要手动同步Next.js路由状态并处理popstate事件：

import { useRouter } from 'next/router'; // Pages Router用该引入，App Router替换为next/navigation
import { useEffect } from 'react';

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

  const addVirtualHistory = () => {
    const currentPath = router.asPath;
    // 向浏览器历史栈添加虚拟路径
    window.history.pushState({ path: '/my_new_route' }, '', '/my_new_route');
    
    // 监听popstate事件，处理后退到虚拟路径的逻辑
    const handlePopState = (event) => {
      if (event.state?.path === '/my_new_route') {
        // 此处可根据需求处理虚拟路径的逻辑，比如停留当前页面或跳转指定路由
      }
      window.removeEventListener('popstate', handlePopState);
    };
    window.addEventListener('popstate', handlePopState);
  };

  return (
    <button onClick={addVirtualHistory}>添加虚拟路由到历史栈</button>
  );
};

export default MyComponent;

这种方式下，调用router.back()会触发popstate事件，你可在回调中处理虚拟路径对应的逻辑，同时保证路由状态同步。

注意事项 #

• 避免混用原生history方法与Next.js路由方法，极易引发状态不一致；
• App Router因采用React Server Components，路由同步逻辑更严格，优先使用官方useRouter方法。

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