javascript - 如何在 Next.js 动态路由中避免 "id undefined"？

Question

我正在使用路由器从一页转到另一页:

    const goToArticle = (index) => {
      router.push({
        pathname: `/article/${index}`,
      })
    }

我要访问的页面被命名为 [id].js 并导出为 Article

在文章页面中，我试图获取该索引:

export async function getStaticPaths({id})  {
  const res = await fetch('myurl');
  const articles = await res.json();
  console.log(params.id);
  return {
      props: {
          article: articles.items[id]
      }
      }
}

Error : ID is undefined

TypeError: Cannot destructure property 'id' of 'undefined' as it isundefined.

如何获取该索引并返回具有该索引的数组项？

Answer 1

您可以如下更改函数重定向:

const goToArticle = (index) => {
  router.push({
    pathname: `/article/[id]`,
    as: `/article/${index}`,
  })
}

请引用文档:https://nextjs.org/docs/api-reference/next/router