Next.js 中的动态嵌套路由

Question

我正在 Next.js 中构建电子商务 Web 应用程序，但遇到了产品过滤问题。假设有 3 个可能的过滤选项：

1. 按类别 - 屈光度/太阳镜
2. 按性别 - 男性/女性
3. 按品牌 - rayban / gucci

现在，过滤器应该作为子页面工作。假设用户选择了男士太阳镜，那么 URL 应如下所示：/sunglasses/men。现在，我的网站上有 4 个可能的示例 URL：

1. /墨镜/男士
2. /太阳镜/雷朋
3. /sunglasses/men/rayban
4. /sunglasses/rayban/男士

我无法弄清楚路由器应该如何区分前两个 URL，并弄清楚第一个 URL 中的第二个参数是性别过滤器，但第二个 URL 中的第二个参数是品牌过滤器。

我正在使用 Next.js 及其服务器端渲染 (getServerSideProps)。

感谢您的帮助。

Answer 1

如果您不想创建单独的路由，可以使用下面的 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:[]
        },
    };

}
}

Answer 2

您可以为具有相同参数的路由创建一个单独的文件夹。

例如

1./太阳镜/男士

1./pages/sunglasses/gender/[gender].js

2./太阳镜/雷朋

2./pages/sunglasses/type/[type].js

3./sunglasses/men/rayban

3./pages/sunglasses/item/[gender]/[item].js

4./sunglasses/rayban/男士

4./pages/sunglasses/gender/[item]/[gender].js