[英]Dynamic nested routes in Next.js
I am building an e-commerce web app in Next.js and I got stuck on product filtering.我正在 Next.js 中构建电子商务 web 应用程序,但我卡在了产品过滤上。 Let's say there are 3 possible filtering options:
假设有 3 个可能的过滤选项:
Now, the filters should work as subpages.现在,过滤器应该作为子页面工作。 Let's say the user chose sunglasses for men, so the URL should look like this: /sunglasses/men.
假设用户选择了男士太阳镜,那么 URL 应该如下所示:/sunglasses/men。 Now, here are 4 possible example URLs on my website:
现在,我的网站上有 4 个可能的示例 URL:
I cannot figure out how the router should be able to distinguish between the first two URLs and figure out that the second parameter in the first URL is a sex filter, but the second parameter in the second URL is a brand filter.我无法弄清楚路由器应该如何区分前两个 URL,并弄清楚第一个 URL 中的第二个参数是一个性别过滤器,但第二个 URL 中的第二个参数是一个品牌过滤器。
I am using Next.js and its server side rendering (getServerSideProps).我正在使用 Next.js 及其服务器端渲染(getServerSideProps)。
Thank you for any help.感谢您的任何帮助。
You can create a separate folder for routes that have same params.您可以为具有相同参数的路由创建一个单独的文件夹。
eg例如
1./sunglasses/men 1./太阳镜/男士
1./pages/sunglasses/gender/[gender].js 1./pages/sunglasses/gender/[gender].js
2./sunglasses/rayban 2./太阳镜/雷朋
2./pages/sunglasses/type/[type].js 2./pages/sunglasses/type/[type].js
3./sunglasses/men/rayban 3./太阳镜/男士/雷朋
3./pages/sunglasses/item/[gender]/[item].js 3./pages/sunglasses/item/[gender]/[item].js
4./sunglasses/rayban/men 4./太阳镜/雷朋/男士
4./pages/sunglasses/gender/[item]/[gender].js 4./pages/sunglasses/gender/[item]/[gender].js
If you don't want to create separate routes , you can use below implementation of gerServerSideProps如果你不想创建单独的路由,你可以使用下面的 gerServerSideProps 实现
export async function gerServerSideProps({ params, ...props }) {
const products = await fetchProducts();
if (params.slugs && params.slugs instanceof Array) {
if (params.slugs.length > 2) {
const filteredProducts = products.filter(
(p) =>
p.category === params.slugs[0] &&
(p.sex === params.slugs[1] || p.sex === params.slugs[2])&&
(p.brand === params.slugs[1] || p.brand === params.slugs[2])
);
return {
props: {
products:filteredProducts
},
};
} else if (params.slugs.length > 1) {
const filteredProducts = products.filter(
(p) =>
p.category === params.slugs[0] &&
(p.sex === params.slugs[1] ||
p.brand === params.slugs[1])
);
return {
props: {
products:filteredProducts
},
};
} else if(params.slugs.length > 0){
const filteredProducts = products.filter(
(p) =>
p.category === params.slugs[0])
return {
props: {
products:filteredProducts
},
};
}
else{
return {
props: {
products:[]
},
};
}
}
you can use the spread operator inside the route name to solve this problem您可以在路由名称中使用扩展运算符来解决此问题
# pages/[...product].ts
example
pages/sunglasses/men/gucci
your query object will be like this
{"product": ["sunglasses","men","gucci"]}
More information check Nextjs Docs更多信息查看Nextjs 文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.