Next.js：如何将数据传递给动态创建的路由

问题描述

我有一个正在接收数据的组件：

const ProductTile = ({ data }) => {
  let { productList } = data
  var [products] = productList
  var { products } = products;
  return (
    <div>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">

        {products.reduce((products,product) => products.find(x => x.productId === product.productId) ? products : [...products,product],[]).map(({ colorCode,defaultColorCode,Now,productId,productCode,productDescription,},index) => {
            return (
              <Link key={`${productId}${index}`}
                href={{
                  pathname: '/s7-img-facade/[slug]',query: { slug: productCode },}}
                passHref>
                  /* template */
              </Link>
            )
          })}
      </div>
    </div>
  )
}

export default ProductTile

它创建了一个模板网格，每个模板都包裹在一个 <Link> 组件中，该组件正在呈现一个动态组件；

/s7-img-facade/[product]

我希望动态组件能够访问 products 中的 ProductTile 对象。

我知道我可以在动态组件中执行 getStaticProps 来执行另一个请求，但这似乎是多余且不枯燥的...

知道动态组件如何访问 products 对象吗？

提前致谢！

解决方法

您的想法是正确的 - 您可以在 query 字段中传递其他属性，但您需要使用 getServerSideProps 从 query 参数中提取这些属性并传递它作为道具给页面组件。像这样：

// pages/product.js
...
  <Link key={`${productId}${index}`}
    href={{
      pathname: '/s7-img-facade/[slug]',query: {
        description: productDescription,slug: productCode
      },}}
    passHref
  >
    /* template */
  </Link>
...

// pages/s7-img-facase/[slug].js
export default function S7ImgFacasePage({ description }) {
  return <p>{ description }</p>
}

export const getServerSideProps = ({ params }) => {
  const description = { params }
  return {
    props: {
      description
    }
  }
}

所以基本上你从第一页的 params 中传递它，在第二页的 getServerSideProps 中读取它，然后将它作为 prop 传递给第二页组件。

您提到了 getStaticProps - 这不适用于静态页面，因为 getStaticProps 仅在构建时运行，因此它对您在运行时发送的参数一无所知。如果您需要一个完全静态的站点，那么您应该考虑将其作为 url 参数传递并在 useEffect 中读取它或通过 getStaticPaths 和 getStaticProps 传递所有可能的页面以生成所有静态页面.

nextjs-dynamic-routing reactjs reactjs reactjs reactjs