Navigation problems after 13 upgrade

[wind pagoda]

I just upgraded from 12 to 13, and I'm having problems loading pages.

My structure is in the pages directory, and it's set up like this: (Image attached)

pages> edition > [edition_id] > round > [round_id] > question > [question_id].js

So http://localhost:3000/edition/4/round/1/question/3 would grab [edition_id] (4 in this case), [round_id] (1 in this case), etc., using this code:

import { useRouter } from "next/router";
const router = useRouter();
const { round_id } = router.query;

I had to change { useRouter } to come from "next/navigation" since it lives there now? but now my router.query doesn't work. help!

[sterile robin]

next/navigation is only for the app directory

For the pages directory you still use next/router as normal

[wind pagoda]

OK. so my original problem is that I'm doing router.push and it is changing my url, but my content is not changing

which led me to the next/navigation

it used to work fine in 12

[sterile robin]

For the pages directory, except some upgrades for next/image and next/link you can consider everything still working the exact same way as in v12

[wind pagoda]

word. weird that my content is not updating

if i type in the url manually then it gives the correct content. but my router.push does not work

in that respect

like, none of my useEffects seem to be firing

[sterile robin]

Without more info I can’t help you with anything here

[wind pagoda]

so the router.push is as so:
router.push(/edition/${edition_id}/round/${round_id}/question/${nextQuestion}

which works out to like: /edition/4/round/1/question/2 being pushed to /edition/4/round/1/question/3

but the page content does not change and the useEffect that grabs the data does not happen. it's like it's doing a soft navigation?

ok, I take it back . . . looking at my Network tab in the inspector it IS making a call

but nothing that's in the useEffect

if i add .then(() => router.reload()) then it works. but I didn't have to do that before . . . weird

[sterile robin]

Hmm this is indeed weird

Can you add another useEffect that console.log the whole query object whenever it changes?

And see if the client-side query got updated on navigation

[wind pagoda]

there is one in there

but it's not updating

[sterile robin]

As in

useEffect(() => console.log(router.query), [router.query]);

Also can try calling push() with an url object instead https://nextjs.org/docs/api-reference/next/router#with-url-object

[wind pagoda]

ok, let me check those out

so that console.log does not update

Objectedition_id: "4"question_id: "4"round_id: "1"

when i navigate

BUT

the header in the page that uses those variables DOES update, I just noticed

ROUND 1 - QUESTION 4 - 400 POINTS changes to ROUND 1 - QUESTION 3 - 400 POINTS when I navigate backwards

effing weird

the url object works, I'll have to rework things to use the params instead

that messes up something else, though . . . sigh. I'll have to just use the reload thing instead and figure this out later. thanks for your help @sterile robin !!!

[stuck dragon]

question, how do you get the current path when using the new useRouter?

next/router had router.asPath

new router does not have that

oh now I see

usePathname

new hook

https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks

that's nice