如何避免 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]
      }
      }
}

錯誤：ID 未定義

類型錯誤：無法解構“未定義”的屬性“id”，因為它未定義。

如何獲取該索引並返回具有該索引的數組項？

Answer 1

您可以更改函數重定向如下：

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

請參考文檔： https : //nextjs.org/docs/api-reference/next/router