Anchor link / fragment Link back button issue

[don-esteban]

Back button with anchor/fagmenmt links don't go back to last position. Tested with Firefox 80.0, Chrome 85.0.4183.83 and Safari 13.1.2 on macOS 10.15.6.

Reproduction steps (and many pages in the online docs):

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
npm update

Insert this two lines somewhere in content/blog/new-beginnings/index.md

[Go to (markdown link)](#gohere)
<a href="#gohere">Go to (a href link)</a>

Insert the anchor somewhere below

<h3 id="gohere">Here You are. Now press the backbutton.</h3>

Back Button will not work:

1. Visit start page http://localhost:8000/
2. Click "New Beginnings"
3. Click one of the anchor links
4. Click back button

Won't return to top of page or previous position.

Back Button still won't work:

1. Click browser refresh button
2. Same as above

Back Button will work:

1. Click in URL address input and hit enter key or visit http://localhost:8000/new-beginnings/ directly
2. Now back button works as expected

Originally posted by @don-esteban in #8019 (comment)

[don-esteban]

This seems to be a nontrivial issue. Does anyone know a work-around? Our visitors use this functionality intensively jumping between table of contents and content. We can't go productive with our Gatsby-site.

[don-esteban]

Let me come back to this serious but still unresolved issue. I don't know, how other productive sites, if existent, handle this bug. Perhaps they live with the broken back button behavior mostly in conjunction with fragment links? One example for broken fragment links are the Gatsby API Docs itself, like https://www.gatsbyjs.com/docs/gatsby-link/ Using the right sidebar does not work at all.

For our site I found a workaround. Let me know if I can help with something, perhaps with fixing some doc issues? Unfortunately I'm not experienced enough to go inside the reach/router and Link implementation. So I have to wait for someone else fixes this issue. Sorry for that.

It seems like the issue is only present when mixing <Link /> components and <a /> tags. To work around this problem, we implemented an own Table of Content component, which uses <Link /> and not <a /> as the https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/ does.

We do not use Markdown links []() neither. We use the <Link /> component in all MDX files for fragment links. For internal links to other pages we use Markdown syntax in conjunction with the gatsby-plugin-catch-links plugin.

Honestly. This workaround in content files (MDX) is critical. We have to convert about 5.000 pages and content authors have to "pollute" the content with Gatsby-Link-Components. I let You know how things are going.

[dbismut]

This issue is related and has been marked as closed #27431

[don-esteban]

I tried to reproduce the error again with the latest Gatsby version 2.24.80. All issues are gone.

Important note! The work around above is not needed any more and would not work anymore! Stay with this simple rule:

1. For links to other pages use the Link component
   <Link to="other-page">Other page link</Link>
2. For fragement links (anchor links, links to the same page) use the HTML a-tag
   <a href="#fragment-link">Same page link</a>

Not sure when this issue was fixed nor who fixed it. Thanks a lot.