links where the event target is a child of the <a> tag causes full page reload

[jamesbirtles]

If you have children inside an anchor, then they get taken as the event.target and therefore the link hijacking this library does fails.

e.g.

<a href="/my/route">
  <p>Some Text</p>
  <p>Some more text</p>
</a>

The event.target used in the click handler code in this example will often be the p tags

svelte-router/src/spa_router.js

Line 113 in 0f72f85

if (event.target.localName.toLowerCase() !== 'a') return

I wonder if its worth 'borrowing' the code from either sapper
https://github.com/sveltejs/sapper/blob/5757a85d195f9ceb2e329caa5e3e38abd5a1123d/runtime/src/app/router/index.ts#L126-L168

or page.js
https://github.com/visionmedia/page.js/blob/4f9991658f9b9e3de9b6059bade93693af24d6bd/page.js#L745-L826

as I assume they will have come across most weird issues like this (certainly page.js)

Either way they both have code along the lines of

    // el.nodeName for svg links are 'a' instead of 'A'
    while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode;

[miedzikd]

I have exactly the same problem... ;(

[ITwrx]

yep. any link without plain text inside will do this... I found out with an <img>.

Using the <Navigate></Navigate> element doesn't seem to do this, but it doesn't update the "active" state either.

I have worked around this for my use case by setting class:active={currentRoute?.name === '/my-page'} on the child element as indicated in #113 (comment)

<Navigate to="/my-page" styles="ml-24"><img src="/icon.png" class="inline-block" class:active={currentRoute?.name === '/my-page'}></Navigate>

[nilsonmolina]

I cannot believe this is still a problem.

In theory, this is my favorite router for svelte. But actually using it has been quite the disappointment when the most simplest things are failing. Regular a tags do not work if they include anything but plaintext, and the Navigate component fails to update the active class unless you have a full page refresh (#113). So literally none of those implementations work for me. The solution above should not have to be used in order to get this to work, and also messes with existing styling of nav bars (especially if styles were meant for a tags).

Come on, let's get this fixed already! You have a fantastic router here, please don't abandon it!