加载 ui 不适用于动态路线

Question

我是 nextjs 的新手，我正在学习 nextjs 的最新版本，即带有应用程序路由器的 nextjs 14，我正在 src/app/loading.jsx 中制作loading.jsx 文件，如下所示

export default function RootLoading() {
  return <h1>Root Loading...</h1>
}

我还为不同的路线 src/app/faq/loading.jsx 制作了一个不同的 loading.jsx 文件，如下所示

export default function FAQLoading() {
  return <h1>FAQ Page Loading...</h1>
}

当我转到任何路线时，如果未加载页面，则一切正常，然后显示 RootLoading；当我转到常见问题解答路线时，如果未加载常见问题解答页面，则显示 FAQLoading。现在看到我的问题，我再次在 src/app/products/[id]/loading.jsx 中创建一个loading.jsx 文件，如下所示

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

但这不起作用，当我要使用任何id查看产品详细信息时，会显示RootLoading，这是我不想要的，经过多次尝试后，我向gemini询问，它给了我一些提示，可以像这样 src/app/products/ [id]/page.jsx

import ProductDetails from "./ProductDetails";
import { Suspense } from "react";
import Loading from "./loading";

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

和 src/app/products/[id]/ProductDetails.jsx

import Image from "next/image";

export default async function ProductDetails({ id }) {
  const product = await fetch(`https://dummyjson.com/products/${id}`);

  return (
    <div className="flex flex-col gap-4 lg:flex-row lg:items-center">
      <Image
        src={product?.imageUrl ?? ""}
        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>
  );
}

但这也不起作用，我认为这都是动态路由造成的。

但我想在 nextjs 14 中通过应用程序路线显示动态路线的独特加载 UI。

Answer 1

这段代码怎么样

import ProductDetails from "./ProductDetails";
import { Suspense } from "react";
import ProductDetailsLoading from "./loading";

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