Next.js 14 App Router动态路由段切换时useEffect未触发的问题排查及解决方案

首先，你遇到的这个问题其实和Next.js 14 App Router的组件复用机制以及数据获取的最佳实践有关，并不是useEffect本身的bug。

为什么useEffect没有触发？ #

在App Router中，当通过<Link>导航到同一路由的不同参数（比如从/products/1到/products/2）时，Next.js会复用当前的Client Component实例，而不是卸载后重新挂载。虽然params.id确实更新了，组件也会重新渲染，但有时候因为React的闭包特性或者Next.js的内部优化，可能会出现useEffect没有正确检测到依赖变化的情况（即使你已经把id加入了依赖数组）。

另外，你的代码中使用Client Component的useEffect来获取数据，这其实不是App Router推荐的方式——Server Component才是处理路由数据获取的最佳选择，它会自动在路由参数变化时重新获取对应的数据。

解决方案1：改用Server Component获取数据（推荐） #

把你的page.tsx改成Server Component（去掉'use client'指令），直接在组件顶层异步获取数据。Server Component会在路由参数变化时自动重新渲染并获取新数据，完全不需要useEffect：

interface Product {
  id: number;
  title: string;
  description: string;
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  // 可选：如果需要每次请求都获取最新数据，添加cache: 'no-store'
  const res = await fetch(`https://dummyjson.com/products/${params.id}`);
  const product = await res.json();

  if (!product) return <p>Loading...</p>;

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

这种方式不仅解决了你的问题，还能提升性能——数据在服务器端获取，减少了客户端的网络请求和渲染负担。

解决方案2：修复Client Component中的useEffect触发问题 #

如果你一定要使用Client Component（比如需要在客户端处理交互逻辑），可以尝试以下两种方式：

方式A：确保fetch请求不被缓存

Next.js默认会缓存fetch请求，虽然你的请求URL随id变化，但有时候缓存机制可能导致意外行为。可以显式禁用缓存：

'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';

interface Product {
  id: number;
  title: string;
  description: string;
}

export default function ProductPage() {
  const params = useParams();
  const id = params.id as string;
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    const fetchProduct = async () => {
      const res = await fetch(`https://dummyjson.com/products/${id}`, {
        cache: 'no-store' // 禁用缓存，确保每次请求都是最新数据
      });
      const data = await res.json();
      setProduct(data);
    };
    fetchProduct();
  }, [id]); 

  if (!product) return <p>Loading...</p>;

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

方式B：监听路由变化

使用usePathname和useParams结合，确保路由变化时触发useEffect：

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

interface Product {
  id: number;
  title: string;
  description: string;
}

export default function ProductPage() {
  const params = useParams();
  const pathname = usePathname(); // 获取当前路径，路径变化时会更新
  const id = params.id as string;
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    const fetchProduct = async () => {
      const res = await fetch(`https://dummyjson.com/products/${id}`);
      const data = await res.json();
      setProduct(data);
    };
    fetchProduct();
  }, [id, pathname]); // 添加pathname作为依赖

  if (!product) return <p>Loading...</p>;

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

总结 #

优先使用Server Component处理路由数据获取，这是App Router的设计初衷，能避免很多客户端数据获取的问题。如果必须使用Client Component，确保你的useEffect依赖正确，或者显式监听路由变化。

内容的提问来源于stack exchange，提问作者Sumit Mayani