URL hashes with lazy loading and default integration

[orenelbaum]

Using the default integration (with location.pathname), when navigating to a URL with a hash, if the route component is lazy loaded, the default behavior of scrolling to the element with the matching ID doesn't work.
That's because the browser will try immediately to scroll to the element, but the element isn't rendered yet because of lazy loading.
I became aware of this issue through a support thread in the Discord.
The best solution I found is to add this to the page component

onMount(() => {
  console.log("mount");
  const hash = location.hash;
  location.hash = "";
  location.hash = hash;
});

This seems to work fine but I was thinking that maybe it could be nice if this behavior was built in, although I'm not really sure how to achieve this.

[Brendan-csel]

Also, this needs to consider when the router is using hashIntegration.

Perhaps better to:

  function scrollToHash() {
    const hash = useLocation().hash;
    if (hash) {
      try {
        const el = document.querySelector(hash);
        el && el.scrollIntoView();
      } catch (e) {
        // ignore bad selector
      }
    }
  }

The user would still need to call this onMount ... or the router could provide it as a <ScrollToHash> component the user adds.

Related: #99 and #130

[orenelbaum]

I was kinda hoping that maybe we could build it into the router somehow so that the router will detect whenever you're navigating to a URL with a hash with a lazy loaded page and would apply this behavior automatically, but like I said I don't know how to achieve it and I'm not sure if it's possible.