NextJS中返回页面时触发useEffect的解决方案求助

针对你遇到的问题，分两种NextJS路由方案给出解决办法：

Pages Router（NextJS 12及更早版本） #

方案1：监听路由变化事件 #

空依赖的useEffect仅在组件首次挂载时执行，而NextJS导航时不会刷新页面，返回同一路径时组件不会重新挂载。可以通过useRouter的路由事件监听导航完成，每次回到该页面都触发API调用：

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

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

  useEffect(() => {
    // 首次加载先执行一次
    loadInformation();

    // 监听路由导航完成事件
    const handleRouteComplete = () => {
      loadInformation();
    };
    router.events.on('routeChangeComplete', handleRouteComplete);

    // 组件卸载时取消监听，避免内存泄漏
    return () => {
      router.events.off('routeChangeComplete', handleRouteComplete);
    };
  }, [router]);

  const loadInformation = async () => {
    // 替换成你的API调用逻辑
    const res = await fetch(`/api/info/${router.query.slug}`);
    const data = await res.json();
    console.log('加载最新数据:', data);
    // 更新页面状态
  };

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

方案2：改用getServerSideProps（服务器端获取数据） #

如果你的页面是动态路由，直接用getServerSideProps在每次请求（包括导航返回）时从服务器获取最新数据，完全绕开前端useEffect的问题：

// 页面组件
export default function YourInfoPage({ infoData }) {
  // 直接使用服务器端传递的最新数据
  return <div>{JSON.stringify(infoData)}</div>;
}

// 服务器端数据获取逻辑
export async function getServerSideProps(context) {
  const { slug } = context.params;
  const res = await fetch(`https://your-api-domain/info/${slug}`);
  const infoData = await res.json();

  return {
    props: { infoData }
  };
}

App Router（NextJS 13及以上版本） #

App Router的客户端组件在导航离开后再返回时会重新挂载，但如果是同一路径无参数变化，可监听路径或搜索参数的变化：

'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export default function YourInfoPage() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    loadInformation();
  }, [pathname, searchParams]);

  const loadInformation = async () => {
    // 你的API调用逻辑
    const slug = searchParams.get('slug'); // 或从路径解析slug
    const res = await fetch(`/api/info/${slug}`);
    const data = await res.json();
    // 更新页面状态
  };

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

如果同一路径无参数变化仍需触发，可在组件顶部添加export const dynamic = 'force-dynamic'禁用缓存，确保返回时组件重新挂载执行useEffect。

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