browser back not working when using router.push

[pinkeyAT]

Bug report

Describe the bug

Using router.push() replaces the url instead of a push and therefore browser back is broken.

We use this as part of a larger app where we use a custom express server and getInitialProps and it worked sometimes but not realiable. We explicit want that getInitialProps is called and that the url is pushed into browser history.

So i created a very small example (see below) and it fails every time.

If we use different urls as 2. paremeter to router.push it works fine and as expected with the major drawback that when a user hard refreshes the page it will fail because for obvious reasons the page does not really exist.

To Reproduce

Sample on codesandbox:

1.) click about
2.) click first button
3.) click second button
4.) click browser back

Expected behavior

As i use router.push() instead of router.replace() i would expect that when i execute step 4 (browser back) it will show me the message im the FirstComponent and that im not going back to the index page.

I think this codeblock is the issue (or maybe even intented - but then i dont really get why)

// If asked to change the current URL we should reload the current page
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
// We also need to set the method = replaceState always
// as this should not go into the history (That's how browsers work)
// We should compare the new asPath to the current asPath, not the url
if (!this.urlIsNew(as)) {
method = 'replaceState'
}

I think i cant follow why this comment states that replaceState should be always set and why it should not go into history. Isnt that what we want when we use router.push() instead of router.replace()?

If this is working as intented, could you give me some hints how i could get following steps done:

1.) execute some action
2.) let page reload on client side that and execute get intial props
3.) show same url, working browser back to prev view and without query parameter in URL

thanks!

System information

• OS: macOS, Windows
• Browser chrome
• Version of Next.js: [latest for the small example, 9.12 for our production app which behaves a little bit different as statet above]

[nstfkc]

Hey your problem is related with this #9574
You can fix it via something like this https://codesandbox.io/s/solitary-violet-u1r3n

[pinkeyAT]

@enestufekci thanks for your response.

Im not 100% sure if your linked issue is the same issue as i (at least think) i have here.

Your suggest fix works good but unfortunatly its not what i want to achieve because i want that the url stays the same without query parameter in the url :(
The strange (good?) thing is at least in the example i provide it never works, in our main project with custom express server it works sometimes as i would expect it but is not reliable.

Btw:

 router.push("/about", "/about?page=firstpage");

is the same as the snipped bellow without the 2. paramter.

router.push({ pathname: "/about", query: { page: "firstpage" } });

Extra note: It can also noticed if you enter "history" in browser console there you can clearly see that router.push does not push a new history entry (as i would expect) instead it replaces the current entry.
In your example and in my code snipped above without the 2. parameter its pushed to history and thats (at least i assume) is the reason browser back does works as expected.

Would be good to know if this is intented so i can find another solution or if its a bug.

[nstfkc]

I checked the source code since you keep the url same push method will be replaced with replaceState thats why if you go to /about directly when you click buttons the history doesnt get updated at all.

https://github.com/zeit/next.js/blob/e3465615e422de7e988e0240695285145e819c51/packages/next/next-server/lib/router/router.ts#L309

[pinkeyAT]

Yes mentioned that in first post but it seems i dont get the comment above those lines why this is how it should work.

For me it does not make that much sense - (Edit: because if use router.push i want a push and not a replace) - but it just could be the lack of knowledge how next/next routing works internally. I think i have to dig a little bit deeper and read more code to get a better understanding.

@enestufekci Do you think this is how it should work when using router.push() or would you also expect that a new history entry will be added and browser back works correctly?

But i think we have to wait until some maintainer has some spare time and clarify this issue :) could take some time as i hope they enjoy holidays with their families as well :)