Website doesn't scroll to hash '#' in URL path, if present

[trivikr]

For example, the CONTRIBUTING.md links to contributing section of manual.md

• Source: https://github.com/denoland/deno/blob/master/CONTRIBUTING.md
• Link: https://deno.land/std/manual.md#contributing

When website loads https://deno.land/std/manual.md#contributing, it doesn't scroll to the contributing section

[trivikr]

This happens as Registry.js doesn't consume hash parameter from useLocation()
https://github.com/denoland/deno_website2/blob/38c5c441d9562f9e9617a52f9509e70493b5ea33/src/Registry.js#L19

Registry.js can consume hash parameter for useLocation(), and scroll to that section on the page on load.
Documentation: https://reacttraining.com/react-router/web/api/Hooks/uselocation

[lucacasonato]

For example, the CONTRIBUTING.md links to contributing section of manual.md

* Source: https://github.com/denoland/deno/blob/master/CONTRIBUTING.md

* Link: https://deno.land/std/manual.md#contributing

When website loads https://deno.land/std/manual.md#contributing, it doesn't scroll to the contributing section

This happens as Registry.js doesn't consume hash parameter from useLocation()

https://github.com/denoland/deno_website2/blob/38c5c441d9562f9e9617a52f9509e70493b5ea33/src/Registry.js#L19

Registry.js can consume hash parameter for useLocation(), and scroll to that section on the page on load.
Documentation: https://reacttraining.com/react-router/web/api/Hooks/uselocation

This is correct, but it is not related to the non-consumption of the hash - useLocation only makes the location available in the component, it does not actually trigger any logic when running the hook.

The root cause of the issue is actually that browsers like Chrome and Firefox, who handle the hash anchoring, only do this within a certain time period or before a certain browser specified metric trips. Because the content of the page is loaded asynchronously - because the page is client rendered - either the time period is over or the metric trips before the content is loaded. After this happens the browser stops trying to find the anchor and scroll it into view.

Anchoring does work if the content is there right away. You can see this yourself by going to the mentioned link and after the content has loaded, click on the url bar again and just press enter. This will re-trigger the anchoring process. The element should now be scrolled into view.

In any case we should definitely fix this as this is not intended behavior. I actually mentioned this exact issue in #70. A way to fix it would be to manually to do the anchoring in JS after the content has been loaded and rendered to the DOM. We need to implement this as a trigger on actual DOM render, which is not super fun in React.

More info: https://medium.com/@gajus/making-the-anchor-links-work-in-spa-applications-618ba2c6954a