时间戳

首页 > 解决方案 > Next.js 动态路由添加到现有路径

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

问题描述

在我使用 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 即可路由到正确的帖子。但它不适用于类别。请帮忙。

标签： reactjsnext.jsstrapi

解决方案

它应该id只返回。

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

推荐阅读