fix(solid-router): allow creating link for client-side-routing in SVG (#5667)

* add test

* fix svg links in solid router

---------

Co-authored-by: Brenley Dueck <[email protected]>

Author: birkskyum

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 />
@@ -71,7 +73,23 @@ function RootComponent() {
           }}
         >
           This Route Does Not Exist
-        </Link>
+        </Link>{' '}
+        <div class="flex items-center">
+          <svg width="20" height="20" viewBox="0 0 20 20" role="img">
+            <title id="rectTitle">Link in SVG</title>
+            <SvgLink to="/posts" aria-label="Open posts from SVG">
+              <rect
+                x="0"
+                y="0"
+                width="20"
+                height="20"
+                rx="4"
+                fill="blue"
+                stroke-width="2"
+              />
+            </SvgLink>
+          </svg>
+        </div>
       </div>
       <Outlet />
       <TanStackRouterDevtools position="bottom-right" />

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

@@ -1,4 +1,8 @@
 import { expect, test } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from '../package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/')
@@ -45,3 +49,16 @@ test('Navigating to a post page with viewTransition types', async ({
   await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
   await expect(page.getByRole('heading')).toContainText('sunt aut facere')
 })
+
+test('Link in SVG does not trigger a full page reload', async ({ page }) => {
+  let fullPageLoad = false
+  page.on('domcontentloaded', () => {
+    fullPageLoad = true
+  })
+
+  await page.getByRole('link', { name: 'Open posts from SVG' }).click()
+  const url = `http://localhost:${PORT}/posts`
+  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()}