Server rendered routes with hashes do not work with browser back/forward navigation

benhonda commented 9 months ago

Link to the code that reproduces this issue

https://github.com/benhonda/nextjs-router-bug

To Reproduce

Go to https://nextjs.org/docs
Click on any of the "hashed" routes (located in the right-hand sidebar on desktop screens)
Navigate to a different page by clicking on a page route (located in the left-hand sidebar on desktop screens)
Click the back button on your browser. The URL changes and the page may scroll, but the page content remains from Step 3.

Current vs. Expected behavior

Currently, the URL changes and the page may scroll, but the page content does not change.

I expect the page to navigate back to the previous content (as specified in the URL) and for my scroll position to be at the specified hash.

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

OS:
MacOS Monterey 12.6.8
Intel chip

Tested browsers:
Firefox 117.0.1, Chrome 117.0.5938.92, Safari 16.5.2

Which area(s) are affected? (Select all that apply)

App Router

Additional context

The "Link to the code that reproduces this issue" just leads to an empty template but I have a good excuse - I swear! I came across this issue in my local development, where I needed to set hash links to footnotes for A11y purposes, however since the issue also appears to be present on the nextjs docs site, I decided to just use that as my example for convenience.

stijnwesterhof commented 9 months ago

I don't see this issue happening on the docs, but I do experience this in my app. Currently also looking for a solution...

evoX0 commented 6 months ago

Same here next 14.0.1

evoX0 commented 5 months ago

Is there any workaround or smth we can use to avoid this issue? thanks

bircha commented 4 months ago

I can reproduce the bug in our project. Any plans for a fix?

itsjavi commented 3 months ago

I cannot reproduce it anymore on the docs page. My problem is similar (using Next.js 14 app router):

Change the hash in the client e.g. window.location.hash = '#l=es'
Reload the page with that hash (e.g. '/pokemon/#l=es').
Change the hash in the client to something else e.g. #l=it
Navigate to a parallel+intercepted route, but keeping the hash (e.g. '/pokemon/bulbasaur/#l=it')
Try to call router.back() (the router from next/navigation)

Behavior:

The page goes back to /pokemon/#l=it, but the intercepted view is still shown
After calling router.back() again it goes to '/pokemon/#l=es' and the intercepted view disappears

Desired behavior: