router.push doesn't refresh page

[WillPwn4Food]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

16.3

What browser are you using?

chrome

What operating system are you using?

Windows 8

How are you deploying your application?

yarn dev

Describe the Bug

Here is my site path: localhost:3000/quizzes/[quizSlug]/[questionNumber]
directory/file path is pages/quizzes/[slug]/[questionNumber].js

I've got the page loading fine with staticProps and staticPaths and I use react useState to keep track of some stats (question number, streak) as well as to toggle two different views: Question view & Answer view.

The problem that is driving me nuts is that as soon as you hit "Continue" to navigate via router.push('/quizzes/' + slug + '/' + (currentQuestion + 1)) to go from [quizSlug]/1 to [quizSlug]/2, the URL will update, but the page will not refresh / re-render.

aside: (I'm pretty sure I've experienced the same behaviour when using 'next/link' to navigate as well to different pages with the same path structure).

When I look at my console.logs I can see that it does load the new props, but it doesn't update or refresh any useState on the page, so my stats don't get updated and my current view is still stuck on Answer mode, instead of back to question mode, so it appears like absolutely nothing has changed (page context is exact change, not even a flash or anything to indicate movement/change).

I'm not sure how to just make it act like it's reloading an entirely new page, which it should be, it's a new URL, but it just so happens to be on the same path structure. I feel like it's trying to act too smart for it's own good in saving load time or cpu, but it's causing me pain.

How do I force a page change to actually just "reload" as if it's navigated to freshly? It feels like the whole point of NextJs is to load static pages really quickly, yet I can't even load 2 different pages on the same path quizzically. It's like I'm trapped in an SPA, but nobody told me or gave me a way out as I thought I was making a bunch of unique static pages (but in a more automated fashion).

Maybe I'm missing something, but I keep having this same issue.
Do I just need to use something like window.location.href = '/quizzes/' + slug + '/' + (currentQuestion + 1)) every time instead?

Expected Behavior

I expect when you use router.push to go to a new page with the same path that it fully update/reloads the new page, loading new props and resetting state.

To Reproduce

I can't release my entire source, but I'm hoping this is a general issue that others are aware of and can share an answer.
Worst case I'll try and build an entirely new app to show this off.

[jacobhq]

Based on my experience of nextjs, and a read through the docs, I think that your window.location.href = '/quizzes/' + slug + '/' + (currentQuestion + 1)) snippet seams the best way to go. You could also set some variable in the state and update it to trigger a re-render.

[maze-le]

@jacobhq isn't this exactly what the next-router should take care of, without enforcing a full page load?

I have pretty much the same issue in a slightly different context. When I do a router.push('/dashboard') the '/dashboard' site gets rendered server side and then nothing happens anymore. I have a few effects that deal with the user session, and they don't get executed at all.

The same happens with <Link href="..."> too.

Only when I change my browser Tab and then change Tab into my application again the client-side code is getting fetched and executed.

When I do a hard page-reload (CTRL+R) or I navigate via window.location=".../dashboard" it works fine.

[ijjk]

Hi, as mentioned in the above comment the Next.js router tries to avoid full-navigations when possible since it's less optimal and increases the amount of time a page navigation takes. When calling router.push the page is re-rendered and the updated router/param values can be accessed using useRouter from next/router related documentation here.

I'm going to close this since it doesn't sound like a bug and is the expected behavior as documented. If you are still encountering trouble with the page not rendering as expected after calling router.push it could be from the way you are updating your state which further guidance can be received by asking in the help section of discussions.

[WillPwn4Food]

Perhaps it would be worth updating the docs to state that if you use this method to navigate to the same directory path, useState will not be reset, because it's definitely not obvious unless perhaps you really know router stuff, because you've used them before and know the history of different routing libraries and SPAs. If you are coming into them fairly fresh, they look easy to understand and use, just "push to go there", ok, easy! But why isn't my state reset, didn't I just go to a new page? What am I missing?

It's definitely a frustrating scenario and I'm at least not the only one who has been hit by this. Just a thought.

[ijjk]

Ah I see, the state not resetting being the main issue wasn't clear from the issue since you mentioned page refreshing being expected which sounds like a full-navigation. I opened a PR here adding a note to mention this behavior and a couple ways to handle it.

[WillPwn4Food]

Thanks, appreciate that! Sorry for not being so clear :)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.