如何解决Next.js 中的动态嵌套路由
我正在 Next.js 中构建电子商务 Web 应用程序,但在产品过滤方面遇到了困难。假设有 3 种可能的过滤选项:
- 按类别 - 屈光度/太阳镜
- 按性别 - 男性/女性
- 按品牌 - rayban / gucci
现在,过滤器应该作为子页面工作。假设用户选择了男士太阳镜,因此 URL 应如下所示:/sunglasses/men。现在,我的网站上有 4 个可能的示例网址:
- /太阳镜/男士
- /太阳镜/雷朋
- /sunglasses/men/rayban
- /sunglasses/rayban/men
我无法弄清楚路由器应该如何区分前两个 URL 并确定第一个 URL 中的第二个参数是性别过滤器,但第二个 URL 中的第二个参数是品牌过滤器。
我正在使用 Next.js 及其服务器端渲染 (getServerSideProps)。
感谢您的帮助。
解决方法
您可以为具有相同参数的路由创建一个单独的文件夹。
例如
1./太阳镜/男士
1./pages/sunglasses/gender/[gender].js
2./sunglasses/rayban
2./pages/sunglasses/type/[type].js
3./sunglasses/men/rayban
3./pages/sunglasses/item/[gender]/[item].js
4./sunglasses/rayban/men
4./pages/sunglasses/gender/[item]/[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:[]
},};
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。