search

TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.77k stars 565 forks source link

Hashed link not scrolling with lazy file routes #2014

Open patatoes1235 opened 1 month ago

patatoes1235 commented 1 month ago

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

  1. Run the stackblitz example
  2. Paste https://stackblitz.com/edit/github-4rybtq/#section into a new tab
  3. Click "connect" if needed
  4. 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

Additional context

No response

SeanCassiere commented 1 month ago

This also doesn't seem to work every with the <ScrollRestoration /> component.

patatoes1235 commented 1 month ago

My best guess is that the browser is trying to scroll down before the lazily loaded component is fully rendered.