fix svg links in solid router

Author: brenelz

e2e/solid-router/basic/src/main.tsx

@@ -5,6 +5,7 @@ import {
   Link,
   Outlet,
   RouterProvider,
+  createLink,
   createRootRoute,
   createRoute,
   createRouter,
@@ -28,6 +29,7 @@ const rootRoute = createRootRoute({
 })
 
 function RootComponent() {
+  const SvgLink = createLink('svg')
   return (
     <>
       <HeadContent />
@@ -75,7 +77,7 @@ function RootComponent() {
         <div class="flex items-center">
           <svg width="20" height="20" viewBox="0 0 20 20" role="img">
             <title id="rectTitle">Link in SVG</title>
-            <Link to="/posts" aria-label="Open posts from SVG">
+            <SvgLink to="/posts" aria-label="Open posts from SVG">
               <rect
                 x="0"
                 y="0"
@@ -85,7 +87,7 @@ function RootComponent() {
                 fill="blue"
                 stroke-width="2"
               />
-            </Link>
+            </SvgLink>
           </svg>
         </div>
       </div>

e2e/solid-router/basic/tests/app.spec.ts

@@ -61,4 +61,4 @@ test('Link in SVG does not trigger a full page reload', async ({ page }) => {
   await page.waitForURL(url)
 
   expect(fullPageLoad).toBeFalsy()
-})
+})

packages/solid-router/src/link.tsx

@@ -281,7 +281,9 @@ export function useLinkProps<
   // The click handler
   const handleClick = (e: MouseEvent) => {
     // Check actual element's target attribute as fallback
-    const elementTarget = (e.currentTarget as HTMLAnchorElement).target
+    const elementTarget = (
+      e.currentTarget as HTMLAnchorElement | SVGAElement
+    ).getAttribute('target')
     const effectiveTarget =
       local.target !== undefined ? local.target : elementTarget
 
@@ -587,6 +589,15 @@ export const Link: LinkComponent<'a'> = (props) => {
     return ch satisfies Solid.JSX.Element
   })
 
+  if (local._asChild === 'svg') {
+    const [_, svgLinkProps] = Solid.splitProps(linkProps, ['class'])
+    return (
+      <svg>
+        <a {...svgLinkProps}>{children()}</a>
+      </svg>
+    )
+  }
+
   return (
     <Dynamic component={local._asChild ? local._asChild : 'a'} {...linkProps}>
       {children()}