如何使用react将分页getStaticPaths拉入内部类别url_slug

s5a0g9ez  于 2023-03-19  发布在  React
关注(0)|答案(1)|浏览(71)

我被getStaticPaths()返回的路径值卡住了
分页工作从根文件夹,但如果我有一个子类别,然后与分页,它将不工作。
错误一直显示
服务器错误错误在/blogs/tag/[url_slug]/pages/[page]的getStaticPaths中,没有以字符串形式提供必需的参数(url_slug)

这是我的档案排列方式。
此网址可用于http://localhost:3000/blogs/pages/2/
工作,但如果这个网址,它将无法工作.. http://localhost:3000/blogs/tag/feedback-500/pages/2/我需要这个网址来代替工作.
这是我在/blogs/tag/feedback上的代码-500/pages/2/

export async function getStaticProps({ params }) {
    const news = await Collection('blogs');

    const blog_taggings = await Collection('blog_taggings');
    const all_blog_taggings = blog_taggings.orderBy('publish_date').getItems();

    const all_paginations = news.getPages(2);
    const all_currentPage = news.getPageItems(params.page, 2)

    return { props: { all_blog_taggings, all_paginations, all_currentPage, global: global.toJson() } };
}

export async function getStaticPaths() {
    const blogsPagesPaths = (await Collection('blogs')).getPages(5);
    return {
        paths: blogsPagesPaths,
        fallback: false
    }
}

问题是,我如何才能使http://localhost:3000/blogs/tag/feedback-500/pages/2/正常工作?

cld4siwp

cld4siwp1#

/blogs/pages/[page]只需要一个参数page
但是,/blogs/tag/[url_slug]/pages/[page]需要两个,即url_slugpage
但这里的问题是您只返回page参数
在/blogs/tag/[url_slug]/pages/[page]的getStaticPaths中,没有以字符串形式提供必需的参数(url_slug)
因此,您返回的paths属性应该是一个数组:

params: {
   url_slug: "example",
   page: "example",
}

不是数组:

params: {
   page: "example",
}

您必须包含url_slugpage的所有可能对值,因此如果您可以从page对象获取page的对应url_slug,这是很好的,因为您将必须仅通过页面进行Map,并且仅包含必要的对象

export function getStaticPaths() {
  const pagesPossiblesValues = [
    {
      id: 1,
      slug: "first_slug",
    },
    {
      id: 2,
      slug: "second_slug",
    },
    {
      id: 3,
      slug: "third_slug",
    },
  ];

  return {
    paths: pagesPossiblesValues.map((element) => ({
      params: { page: element.id, url_slug: element.slug },
    })),
    fallback: false,
  };
}

但是,如果这不可行,则应循环两次,以确保获得页面/辅助信息对值的所有可能组合:

const pagesPossiblesValues = [
    {
      id: 1,
    },
    {
      id: 2,
    },
    {
      id: 3,
    },
  ];
  const slugPossiblesValues = [
    {
      slug: "first",
    },
    {
      slug: "second",
    },
    {
      slug: "third",
    },
  ];
 let final = [];

 pagesPossiblesValues.forEach((page) => {
    slugPossiblesValues.forEach((slug) => {
      final.push({ params: { page: page.id, url_slug: slug.slug } });
    });
  });

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

相关问题