Routing between Dynamic Routes in Nextjs

Domitrius Clark: [0:00] Back in our singular user component, we'll import our useQuery and our fetch again.

[0:13] Down we'll define our useQuery. We'll destructure data and status. We'll define an array queryKey with a cache key of user and an id variable. Then we'll define our asynchronous fetch function. We'll grab the key and the id. We'll define a constant of user and await our fetch to our /api/user/${id}. Then we'll return the user.json.

[0:50] Per usual, we'll check to see if the status is loading and return our "Loading ..." tag. Replace our old return with a new one. We'll return a div. We'll check to make sure that data isn't undefined and then return some JSX. We'll use a fragment here.

[1:17] We'll render a button so that we can go back from where we came, onClick. We'll use our router.back functionality so that anywhere that we came from the router already knows. We'll let the router decide where back is. We then can take the id, the name, and the email and put those all on <p> tags.

[1:47] Hit Save and head on over to the browser. We'll click Domitrius first. You'll see we're getting all of our information. We can go back. Dan. Go back again. Anna. Fantastic.