How to avoid "id undefined" in Next.js dynamic route?

Question

I am going from one page to another with router :

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

The page I am going to is named as [id].js and is exported as Article

And in the article page I am trying to get that index :

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 is undefined.

How to get that index and return array item with that index ?

user_7560960 · Answer

You can change function redirection as below:

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

please refer document: https://nextjs.org/docs/api-reference/next/router

How to avoid "id undefined" in Next.js dynamic route?

1 Answers