Nextjs动态路由-如何将道具从父路由传递到动态路由子路由

// pages/products/[id].js

import { useRouter } from 'next/router';

const ProductDetails = ({ product }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product Details</h1>
      <h2>ID: {id}</h2>
      <p>Name: {product.name}</p>
      <p>Price: {product.price}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  const { id } = context.query;

  // Fetch product data based on the id
  const res = await fetch(`API_ENDPOINT/products/${id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
}

export default ProductDetails;

// pages/products/[id].js

import { useRouter } from 'next/router';

const ProductDetails = ({ product }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product Details</h1>
      <h2>ID: {id}</h2>
      <p>Name: {product.name}</p>
      <p>Price: {product.price}</p>
    </div>
  );
};

export async function getStaticProps({ params }) {
  const { id } = params;

  // Fetch product data based on the id
  const res = await fetch(`API_ENDPOINT/products/${id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
}

export async function getStaticPaths() {
  // Fetch all product ids
  const res = await fetch(`API_ENDPOINT/products`);
  const products = await res.json();

  // Generate paths for all product ids
  const paths = products.map((product) => ({
    params: { id: product.id },
  }));

  return {
    paths,
    fallback: false, // Show 404 if the id doesn't exist
  };
}

export default ProductDetails;