Next.js中点击浏览器返回按钮时动态路由页面无法正常加载

问题根源 #

直接使用原生History.pushState()/History.replaceState()会绕过Next.js的路由状态管理系统，Next.js无法感知URL的变化，因此点击浏览器返回按钮时，仅浏览器URL更新，但页面组件不会触发数据重新获取或状态更新。

正确解决方案：使用Next.js官方Router API #

Next.js提供了内置的路由管理工具next/router，用它来更新URL会同步维护Next.js的内部路由状态，确保前进/后退时页面数据自动同步。

代码示例 #

import { useRouter } from 'next/router';

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

  // 从API获取新路径并更新URL
  const updateUrl = async () => {
    // 模拟从API获取新路径
    const newPath = await fetch('/api/get-new-path').then(res => res.text());
    
    // 推送新路由到历史记录（不会刷新页面）
    await router.push(newPath);
    
    // 如果不需要添加历史记录条目，使用replace：
    // await router.replace(newPath);
  };

  return <button onClick={updateUrl}>更新URL</button>;
}

路由变化时自动同步数据 #

如果页面使用服务端数据获取（如getServerSideProps），使用router.push()/router.replace()会自动重新执行数据获取逻辑；如果是客户端组件，可通过监听路由变化触发数据更新：

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

function DynamicPage() {
  const router = useRouter();
  const [pageContent, setPageContent] = useState('');

  // 监听路由路径变化，重新获取数据
  useEffect(() => {
    const fetchContent = async () => {
      const res = await fetch(`/api/content${router.asPath}`);
      const content = await res.text();
      setPageContent(content);
    };

    fetchContent();
  }, [router.asPath]); // 依赖路由路径，变化时重新执行

  return <div>{pageContent || 'Loading...'}</div>;
}

特殊场景：必须使用原生History API的补救方案 #

如果因业务限制必须使用原生History API，需要手动监听popstate事件，同步Next.js路由状态并触发数据更新：

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

function ManualUrlUpdateComponent() {
  const router = useRouter();
  const [data, setData] = useState(null);

  // 根据路径获取数据的通用函数
  const fetchData = async (currentPath) => {
    const res = await fetch(`/api/data?path=${encodeURIComponent(currentPath)}`);
    const newData = await res.json();
    setData(newData);
  };

  // 初始化数据
  useEffect(() => {
    fetchData(router.asPath);
  }, []);

  // 监听浏览器前进/后退事件
  useEffect(() => {
    const handlePopState = () => {
      const currentPath = window.location.pathname + window.location.search;
      // 同步Next.js路由状态
      router.replace(currentPath);
      // 重新获取对应路径的数据
      fetchData(currentPath);
    };

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

  // 手动使用History API更新URL
  const updateUrlManually = async () => {
    const newPath = await fetch('/api/get-new-path').then(res => res.text());
    window.history.pushState({}, '', newPath);
    // 更新URL后立即同步数据
    fetchData(newPath);
  };

  return (
    <>
      <button onClick={updateUrlManually}>手动更新URL</button>
      {data && <div>当前数据：{JSON.stringify(data)}</div>}
    </>
  );
}

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