when navigating to a Route, that is not already rendered, the browser will check for a jump mark immediately, but of course rendering the Route takes some time, so the browser won't find the element and won't scroll the page.
I think there are two possible ways to solve this. Either, when calling navigate, e.g. by clicking a Link, we need to update the Routers internal location first, wait for the Routes to render, and then call history.pushState. But there is probably a lot of tricky work to be done. The second possibility is to assign window.location.href back to itself, after all Routes have rendered. This however triggers a popstate event in some browsers, which the Router will interpret as a new navigation, so we need to make sure, not to cause infinite loops by accident.
To Reproduce
... some content ...
<Route path="myRoute">
<main id="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</main>
</Route>
When opening /myRoute#main, the page does not scroll to the main Element.
The same happens, when navigating to a Route via a Link or navigate.
Expected behavior
The page should scroll to the element, referenced by the fragment.
Describe the bug
See #3:
To Reproduce
When opening
/myRoute#main
, the page does not scroll to the main Element. The same happens, when navigating to aRoute
via aLink
ornavigate
.Expected behavior The page should scroll to the element, referenced by the fragment.