Next.js 中的动态嵌套路由
Dynamic nested routes in Next.js
我正在 Next.js 中构建一个电子商务 Web 应用程序,但我在产品过滤上遇到了困难。假设有 3 个可能的过滤选项:
- 按类别 - 屈光/太阳镜
- 按性别 - 男性/女性
- 按品牌 - rayban / gucci
现在,过滤器应该作为子页面工作。假设用户选择了男士太阳镜,那么 URL 应该是这样的:/sunglasses/men。现在,我的网站上有 4 个可能的示例 URL:
- /sunglasses/men
- /sunglasses/rayban
- /sunglasses/men/雷朋
- /sunglasses/rayban/男
我无法弄清楚路由器应该如何区分前两个 URL 并弄清楚第一个 URL 中的第二个参数是性别过滤器,但第二个第二个参数 URL 是品牌过滤器。
我正在使用 Next.js 及其服务器端呈现 (getServerSideProps)。
感谢您的帮助。
您可以为具有相同参数的路由创建一个单独的文件夹。
例如
1./sunglasses/men
1./pages/sunglasses/gender/[性别].js
2./sunglasses/rayban
2./pages/sunglasses/type/[类型].js
3./sunglasses/men/雷朋
3./pages/sunglasses/item/[性别]/[项目].js
4./sunglasses/rayban/男
4./pages/sunglasses/gender/[项目]/[性别].js
如果您不想创建单独的路由,您可以使用下面的 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:[]
},
};
}
}
我正在 Next.js 中构建一个电子商务 Web 应用程序,但我在产品过滤上遇到了困难。假设有 3 个可能的过滤选项:
- 按类别 - 屈光/太阳镜
- 按性别 - 男性/女性
- 按品牌 - rayban / gucci
现在,过滤器应该作为子页面工作。假设用户选择了男士太阳镜,那么 URL 应该是这样的:/sunglasses/men。现在,我的网站上有 4 个可能的示例 URL:
- /sunglasses/men
- /sunglasses/rayban
- /sunglasses/men/雷朋
- /sunglasses/rayban/男
我无法弄清楚路由器应该如何区分前两个 URL 并弄清楚第一个 URL 中的第二个参数是性别过滤器,但第二个第二个参数 URL 是品牌过滤器。
我正在使用 Next.js 及其服务器端呈现 (getServerSideProps)。
感谢您的帮助。
您可以为具有相同参数的路由创建一个单独的文件夹。
例如
1./sunglasses/men
1./pages/sunglasses/gender/[性别].js
2./sunglasses/rayban
2./pages/sunglasses/type/[类型].js
3./sunglasses/men/雷朋
3./pages/sunglasses/item/[性别]/[项目].js
4./sunglasses/rayban/男
4./pages/sunglasses/gender/[项目]/[性别].js
如果您不想创建单独的路由,您可以使用下面的 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:[]
},
};
}
}