如何解决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
传递所有可能的页面以生成所有静态页面.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。