使用 Strapi 创建多个动态路径，并带有嵌套的动态页面答案

【问题标题】：Creating multiple dynamic paths with Strapi, with nested dynamic pages使用 Strapi 创建多个动态路径，并带有嵌套的动态页面
【发布时间】：2022-10-01 02:06:22
【问题描述】：

我正在使用 Strapi 通过 API GET 请求将动态数据调用到我的网站中，并且我想为我的动态页面生成路径。一个级别的动态页面可以正常工作，但第二个级别是一个挑战。

我的结构如下：

[category].js
[category]/[client].js

两者都是动态的，所以我有一个类别“时尚”，有多个客户。其他类别如“产品”也是如此。

第一个动态页面在构建路径时效果很好 [dynamic.js]。

import CategoryCard from \"../../../components/portfolio/categoryCard\";
import { fetcher } from \"../../../lib/api\";

export const getStaticPaths = async () => {
  const categoryPathResponse = await fetcher(
    `${process.env.NEXT_PUBLIC_STRAPI_URL}/categories`
  );
  const data = categoryPathResponse.data;

  const paths = data.map((path) => {
    return {
      params: { category: path.attributes.path.toString().toLowerCase() },
    };
  });

  return {
    paths,
    fallback: false,
  };
};

export async function getStaticProps(context) {
  const category = context.params.category;
  const categoryPropsResponse = await fetcher(
    `${process.env.NEXT_PUBLIC_STRAPI_URL}/categories?filters[path][$eq]=${category}&?populate[0]=clients&populate[1]=clients.thumbnail`

  );

  return {
    props: { category: categoryPropsResponse },
  };
}

const CategoryOverviewPage = ({ category }) => {
  const data = category.data;
  const categoryTitle = data[0].attributes.Category;

  return (
    <>
      {console.log(\'data for category before card\', data)}
      <div className=\"flex px-4 mt-24 lg:mt-12 lg:px-20\">
        <div>
          <h1 className=\"[writing-mode:vertical-lr] [-webkit-writing-mode: vertical-lr] [-ms-writing-mode: vertical-lr] rotate-180 text-center\">
            {categoryTitle}
          </h1>
        </div>
        <div className=\"grid grid-cols-[repeat(auto-fit,_minmax(150px,_250px))] gap-4 lg:gap-8 ml-4 lg:ml-32 max-w-[82vw]\">
          <CategoryCard data={data} />
        </div>
      </div>
    </>
  );
};

export default CategoryOverviewPage;

但复杂性来自第二部分，其中我必须为每个类别创建多个路径。我尝试了以下结果 [clients].js

export const getStaticPaths = async () => {
    const categoryPathResponse = await fetcher(
        `${process.env.NEXT_PUBLIC_STRAPI_URL}/categories?populate=*`
    );
    const data = categoryPathResponse.data;

    const paths = data.map((path) => {
        const category = path.attributes.path.toString().toLowerCase()
        const client = path.attributes.clients.map((client) => client.name).toString().toLowerCase().replace(/\\s+/g, \"-\")

        return {
            params: {
                category: category, client: client
            },
        };
    });

    return {
        paths,
        fallback: false,
    };
};

export async function getStaticProps(context) {
    const category = context.params.category;
    const client = context.params.client;

    const data = await fetcher(
        `${process.env.NEXT_PUBLIC_STRAPI_URL_BASE}/categories?filters[path][$eq]=${category}&?populate[clients][populate]=*&populate[clients][filters][name][$eq]=${client}`
    );

    return {
        props: { client: data },
    };
}

它似乎适用于只有 1 个项目的类别，这是有道理的，因为 URL（路径）是像 index/category/client 这样创建的。但是当有多个客户端时，它会尝试创建一个具有 1 个类别和多个客户端附加到同一路径的路径，例如 category/client1client2。

这必须分开，并且对于每个客户端，必须创建一个新路径，例如category1/client1、category1/client2、category2/client1、category2/client2 等。

有任何想法吗？

标签： reactjs next.js strapi

【解决方案1】：

除了映射类别data，您还需要映射客户端数组并为每个类别生成一个路径条目。

修改/[category]/[client].js中getStaticPaths里面的代码如下。

export const getStaticPaths = async () => {
    // Existing code...

    const paths = data.map((path) => {
        const category = path.attributes.path.toString().toLowerCase()

        return path.attributes.clients
            .map((client) => {
                return {
                    params: {
                        category: category, client: client.name.toLowerCase().replace(/\s+/g, "-")
                    }
                };
            })
            .flat() // Flatten array to avoid nested arrays
    });

    return {
        paths,
        fallback: false,
    };
};

【讨论】：