Next.js App Router点击浏览器返回触发页面重载（CRA迁移项目）

这个问题的核心是Next.js App Router与react-router的路由历史栈冲突。在Pages Router模式下，catch-all页面的路由逻辑完全由客户端的react-router接管，Next.js仅负责初始渲染；但App Router的路由机制会主动监听浏览器历史变化，当react-router连续修改两次历史记录后，Next.js路由系统会误判为需要全页重载，从而引发返回时的异常行为。

解决方案一：让react-router完全接管客户端路由，阻止Next.js的路由干预 #

修改/src/app/[[...app]]/page.tsx，添加对Next.js路由事件的拦截，确保所有路由变化都由react-router处理：

'use client';

import dynamic from 'next/dynamic';
import '../../index.css';
import { useEffect } from 'react';
import { useRouter as useNextRouter } from 'next/navigation';

const CreateReactAppEntryPoint = dynamic(() => import('containers/Root'), {
  ssr: false,
});

function Page() {
  const nextRouter = useNextRouter();

  useEffect(() => {
    // 拦截Next.js的路由导航，交由react-router处理所有路径变化
    const handleRouteChange = () => {
      // 手动触发react-router的路由更新（适配BrowserRouter的history监听）
      window.dispatchEvent(new PopStateEvent('popstate'));
      return false;
    };

    const unsubscribe = nextRouter.beforePopState(handleRouteChange);
    return unsubscribe;
  }, [nextRouter]);

  return <CreateReactAppEntryPoint />;
}

export default Page;

解决方案二：替换react-router的Link为Next.js的Link组件（渐进式迁移） #

如果计划逐步迁移到Next.js原生路由系统，可以将项目中所有react-router-dom的Link组件替换为Next.js的next/link组件，同时确保react-router的路由配置与App Router的catch-all规则兼容。这种方式能从根源上避免路由历史冲突，但需要修改项目中的路由链接代码。

额外检查点 #

• 确保containers/Root中使用的是BrowserRouter而非HashRouter，App Router依赖HTML5的history API，HashRouter会导致路由逻辑不兼容。
• 排查项目中自定义的popstate事件监听，这类监听可能会和Next.js的路由事件冲突，需要调整监听逻辑或移除重复监听。

内容的提问来源于stack exchange，提问作者A. Iglesias