Question

在我使用 Strapi CMS 的 Next.js 博客中，我试图根据其类别对帖子进行排序。我为类别 [id].js 创建了一个动态路由。它像这样使用 getStaticPaths：

export async function getStaticPaths() {
const categories = await getCategories()
return {
    paths: categories.map((category) => `/categories/${category.id}`) || [],
    fallback: false,
}

我正在使用下拉列表来过滤类别。例如，如果我选择类别 1，则路径是这样的 http://localhost:3000/categories/1。到这里就好了。

但是当我选择类别 2 时，下拉列表仍然呈现在页面上。现在，路径是 http://localhost:3000/categories/categories/2 这当然会导致 404 错误。

预期结果是 http://localhost:3000/categories/2

我用于下拉元素的下一个/链接组件如下所示：

<Link href="/categories/[id]" as={`/categories/${category.id}`}>
      <a>{category.name}</a>
</Link>

我知道我犯了一些错误，但不知道是什么错误。

但是，我有一个用于帖子的 [slug].js，它也可以呈现更多帖子。这将路由到适当的帖子，而无需为路径添加额外的 /posts。但它对类别的工作方式不同。请帮忙。

Answer 1

它应该只返回 id。

export async function getStaticPaths() {
  const categories = await getCategories()
  const paths = categories.map((category) => ({
    params: { id: category.id.toString() },
  }))
  return {
      paths,
      fallback: false,
  }
}

Answer 2

为什么不使用本示例中的 parmas 属性？ https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

Next.js 动态路由添加到现有路径

2 个答案: