[Bug]: Routing from a location to a location/hash Continued about react-router

[brophdawg11]

Scroll management is not available when using BrowserRouter - you would need to handle that via your own effects.

We released a ScrollRestoration component in 6.4 that you can use with a Data Router/RouterProvider that solves this: https://stackblitz.com/edit/react-ts-ug6gbd?file=App.tsx

You shouldn't need to use JavaScript to take your user to the hashed location on another page.

This is a bit confusing to me since you've already opted into JS being a requirement with the SPA architecture? If you were rendering your HTML on the server, then the reloadDocument suggestion would work as expected. It doesn't only because the anchor indicated by the hash does not exist on page load.

[rebeccapeltz]

reloadDocument does work on the Home page, where the anchor is located. Are you saying that if I had pre-rendered the About page, that this would work?
I appreciate the clarification that we need to write our own JavaScript for this cross-page scroll-to-hash functionality. I was concerned that I was not correctly implementing the react-router package.

[brophdawg11]

Yep! reloadDocument basically turns your link into a normal <a href> that react router doesn't touch (no onClick listener, no e.preventDefault(), no client side routing) so it will be a document HTTP request to your server for a fresh HTML page. Browser's built-in hash-routing operates on the initial HTML returned from the server - and if it doesn't find an id matching the hash in that HTML then it doesn't do any scrolling. So if the HTML returned from the server for GET /about had the midpoint ID in it then it would work as expected.

My recommendation would be to migrate to a data router if possible and then ScrollRestoration should solve your problem.

If you can't migrate at the moment, you may be able to adapt the code in https://github.com/epicweb-dev/restore-scroll (which is loosely based on ScrollRestoration and adapted to work for any element with scrolling) and remove the useNavigation logic since there is no "navigation " concept in BrowserRouter and my hunch ois that you can get pretty close to getting a working <ScrollRestoration> for BrowserRouter