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

Next.js是一个流行的React框架，用于构建服务器渲染的React应用程序。动态路由是Next.js中的一个重要特性，它允许我们根据URL的不同部分动态生成页面。

在Next.js中，我们可以通过在页面文件名中使用方括号([])来创建动态路由。例如，如果我们有一个名为[id].js的页面文件，那么它将匹配类似于/products/1的URL，并将1作为参数传递给页面组件。

要将道具从父路由传递到动态路由的子路由，我们可以使用Next.js提供的getServerSideProps或getStaticProps函数。

使用getServerSideProps：
- getServerSideProps是一个异步函数，可以在服务器端渲染期间获取数据并将其作为道具传递给页面组件。
- 在父路由页面中，我们可以通过调用getServerSideProps函数来获取数据，并将其作为参数传递给子路由页面。
- 子路由页面可以通过接收props参数来访问传递的道具。
- 以下是一个示例：

// 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;

使用getStaticProps：
- getStaticProps也是一个异步函数，用于在构建时（静态生成）获取数据并将其作为道具传递给页面组件。
- 父路由页面中的getStaticProps函数将数据作为参数传递给子路由页面。
- 子路由页面可以通过接收props参数来访问传递的道具。
- 以下是一个示例：

// 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;

在上述示例中，我们使用getServerSideProps或getStaticProps函数从API端点获取产品数据，并将其作为product道具传递给子路由页面。子路由页面可以通过props参数访问传递的道具，并在页面中显示相关信息。

请注意，示例中的API_ENDPOINT应替换为实际的API端点地址。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云函数（SCF）、腾讯云云数据库MySQL版（CDB）、腾讯云对象存储（COS）等。你可以在腾讯云官方网站上找到这些产品的详细介绍和文档。

希望以上信息能对你有所帮助！