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

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,
}

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

但是下拉菜单仍然呈现在页面上，当我 select 类别 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

Answer 3

我不确定这是否是解决此问题的正确方法，我只是添加了一个条件来检查路径名中是否已经存在 /categories。 如果是这样，我不会像这样将 /categories 添加到 href 链接：

    <Link as={this.props.router.pathname.includes("categories") ? `${category.id}` : `categories/${category.id}`}
          href={this.props.router.pathname.includes("categories") ? "[id]" : "categories/[id]"}>
      <a>{category.name}</a>
   </Link>

请让我知道是否有更好的解决方案