TanStack
Hashed link not scrolling with lazy file routes
Describe the bug
Urls with hashes not scrolling to correct section when using lazy file routes. This occurs any time the page is fully rerendered (e.g. on reload and when accessing a link with a hash in a new tab). Works as expected with normal (non-lazy) file routing.
Your Example Website or App
https://stackblitz.com/edit/github-4rybtq
Steps to Reproduce the Bug or Issue
- Run the stackblitz example
- Paste https://stackblitz.com/edit/github-4rybtq/#section into a new tab
- Click "connect" if needed
- Notice how even though the #section tag is appended to the url, the section is not scrolled to.
Expected behavior
Regardless of whether the route is lazy loaded or not, I would expect that when accessing a url with a section, the DOM element with the corresponding id is scrolled to.
Screenshots or Videos
No response
Platform
- OS: Windows
- Browser: Chrome
Additional context
No response
This also doesn't seem to work every with the <ScrollRestoration /> component.
My best guess is that the browser is trying to scroll down before the lazily loaded component is fully rendered.
Completed with https://github.com/TanStack/router/releases/tag/v1.98.1
Closing once again, after confirming that this issue is indeed fixed.
There was an issue with the original reproduction, whereby the div used a my-[100px] which in turn moved the start of the element much higher than where the actual content was placed.