How to access data passed from a component to a page via in nextjs

Question

I have a nextjs app . I have used this answer https://stackoverflow.com/a/72221419/14287707 to pass data from a component to a page using the Link like this.

                <Link href={{
                  pathname: "/products/"+id,
                  query: userId // the data
                }}>  
                  <a>Show more</a>
                </Link>

So I am able to see the extra data that I have passed on the receiving page as an object like this, [id].tsx

const router = useRouter();
const data  = router.query;

  console.log("USER ID IS!!!!!!", data)

but the console log gives me the value with an empty key like this

{990:""
id: "12"}

It also gets appended on the url like this

products/12?990

How can I access the 990 ? eg I can get the id like this data.id . But what about the userId ?

What is the name of the file where you have this code? It should be a dynamic route — Tushar Shahi, Nov 08 '22 at 07:48

score 1 · Accepted Answer · answered Nov 08 '22 at 07:53

Your current url is products/12?990. It should ideally be products/12?userId=990. The reason for that is that you are passing a primitive string like query: userId, which translates to query: 990.

You are supposed to pass an object according to the docs like :

 query: { userId : userId }

or simply:

 query: { userId }

How to access data passed from a component to a page via in nextjs

1 Answers1