Issues with Hash Routing

[dairyisscary]

I have a page with a table of contents, HTML looks something like this:

<article>
  <h1 id="one">...</h1>
  <h2 id="two">...</h2>
  <h2 id="three">...</h2>
</article>

Table of Contents
<ol>
  <li><a href="#one">one</a></li>
  <li><a href="#two">two</a></li>
  <li><a href="#three">three</a></li>
</ol>

I'm rendering the HTML with template like this, though i did try plain <a> tags

<For each={tableOfContents()}>
  {({ id, text }) => (
    <li>
      <Link href={`#${id}`}>{text}</Link>
    </li>
  )}
</For>

theses are hash links to items on the same page/route. they appear to make the page scroll to the top, rather than to the item within the page. I'm not entirely sure what the issue is but I did fix the issue by tricking the anchor click method. i added taget="_self" to the anchor so the click handler early returns and browser default behavior takes over.

[ryansolid]

Thanks for bringing this to our attention. This was a recent change to better handle progressive enhancement and different advanced hydration techniques. We largely lifted this from SvelteKit but it seems like there is a gap here. As you noticed there are tricks to get around this.. another is rel="external". But this is definitely a place we can look at improving. I wonder if simply starting with # is sufficient. Hash after the route I imagine doesn't work either since when we handle the link we won't go to the anchor I imagine.

[rturnq]

This should be resolved in 0.3.2 without needing to add target or rel="external".

[dairyisscary]

nice! thanks @rturnq, seems to work great!