Next.js 14 App Router动态路由Loading UI失效问题求助

核心问题分析 #

你的动态路由products/[id]的loading组件不生效，主要有两个原因：

• ProductDetails中的fetch未正确解析响应数据，导致组件逻辑异常，影响了Next.js的自动加载状态检测
• 手动用Suspense包裹的方式冗余，App Router的loading.jsx会自动接管路由级的加载状态，无需额外处理

修复步骤 #

1. 修正数据获取逻辑 #

在src/app/products/[id]/ProductDetails.jsx中，fetch返回的是Response对象，需要解析为JSON才能拿到产品数据：

import Image from "next/image";

export default async function ProductDetails({ id }) {
  // 新增解析响应的步骤
  const res = await fetch(`https://dummyjson.com/products/${id}`);
  const product = await res.json();

  return (
    <div className="flex flex-col gap-4 lg:flex-row lg:items-center">
      <Image
        src={product?.images?.[0] ?? ""}
        alt={product?.title ?? ""}
        width={500}
        height={500}
        className="rounded-lg"
        priority
      />
      <div>
        <h1 className="text-5xl font-bold">{product?.title}</h1>
        <p className="py-6">{product?.description}</p>
        <p>${product?.price}</p>
      </div>
    </div>
  );
}

2. 简化页面组件，移除手动Suspense #

App Router的loading.jsx会自动为对应路由段提供加载UI，无需手动用Suspense包裹。修改src/app/products/[id]/page.jsx：

import ProductDetails from "./ProductDetails";

export default async function ProductDetailsPage({ params }) {
  return <ProductDetails id={params.id} />;
}

3. 保留正确的loading组件位置 #

确保src/app/products/[id]/loading.jsx的文件结构和内容不变：

export default function ProductDetailsLoading() {
  return <h1>Product Details Page Loading...</h1>;
}

验证效果 #

现在访问/products/[任意id]时，Next.js会在ProductDetails组件异步获取数据期间，自动渲染该路由专属的loading.jsx，而非根加载组件。

额外注意事项 #

• 页面组件（或其导入的异步子组件）必须包含顶层异步操作（比如fetch），这样Next.js才能检测到加载状态，触发对应的loading.jsx
• 客户端导航时，使用next/link组件跳转，可保留加载状态的切换逻辑

内容的提问来源于stack exchange，提问作者Vishal Kumar