小编Dom*_*iro的帖子

我正在使用 Next.js 和样式组件的项目中工作。在我的文件 [slug].tsx 中：

export default function ProductDetails({ product }: IProductDetailsProps) {
  const router = useRouter();

  if (router.isFallback) {
    return (
      <LoadingContainer>
        <ReactLoading color="#000" type="bubbles" />
      </LoadingContainer>
    );
  }

  return (
    <>
      {product._id ? (
        <>
          <Header />

          <Container>
            <ProductPath>
              <Link href="/">Home</Link>

              <Link href="/shop">Shop</Link>

              {product.categoryId && (
                <Link href={`/shop/${product.categoryId.slug}`}>
                  {product.categoryId.name}
                </Link>
              )}

              <span>{product.name}</span>
            </ProductPath>

            <ProductInfo product={product} />
          </Container>
        </>
      ) : (
        <Error>An unexpected error has occurred.</Error>
      )}
    </>
  );
}

大多数标签来自 styled-components，例如：

export const LoadingContainer = styled.div`
  display: …