router.push doesn't refresh page

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.