Scroll to hash anchor not working on initial render

The code in client.js supports jumping to an anchor while navigating through the site. However, this code is not hit when initially loading the site with a hash.

I created a fork of react-starter-kit at https://github.com/jorrit/react-starter-kit/tree/hashinit where the footer has an id attribute. The header contains a Link component to #footer and clicking this link works fine.

However, visiting http://localhost:3000/#footer on a new tab doesn’t scroll to the footer.

Should React take care of scrolling to the anchor on first load? Or should the code in client.js that scrolls to an anchor also be executed when isInitialRender = true?

Finally, I added a regular <a href="#footer"> to the navigation bar. This one doesn’t work at all, because regular hash changes cause a POP history event and <Link to="#footer"> causes a PUSH event. The condition if (action === 'PUSH') { should be extended to check for location changes that indicate a hash change.

I could make some PR’s if you like but perhaps the direction of the solution should be discussed first because there are different ways to handle this.

[frenzzy]

I believe the browser should care about scrolling to hash at initial page load. If it does not work, then probably disabling scroll restoration code must be executed right after initial page render but not before as it is now.

[jorrit]

Thanks, I was also thinking about the situation where <a> tags are present in data coming from a CMS or something like that. I think onLocationChange can be amended to take into account these kinds of location changes. I don’t yet need this myself and I have the feeling that it isn’t a priority for you either, so I will not create a PR for it now. Maybe later.