Fix svg a link solid component

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

@@ -69,7 +69,23 @@ function RootComponent() {
           }}
         >
           This Route Does Not Exist
-        </Link>
+        </Link>{' '}
+        <div className="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">
+              <rect
+                x="0"
+                y="0"
+                width="20"
+                height="20"
+                rx="4"
+                fill="blue"
+                strokeWidth="2"
+              />
+            </Link>
+          </svg>
+        </div>
       </div>
       <Outlet />
       <TanStackRouterDevtools position="bottom-right" />

e2e/react-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()
+})

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

@@ -5,6 +5,7 @@ import {
   Link,
   Outlet,
   RouterProvider,
+  createLink,
   createRootRoute,
   createRoute,
   createRouter,
@@ -13,6 +14,7 @@ import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 import { NotFoundError, fetchPost, fetchPosts } from './posts'
 import './styles.css'
 import type { ErrorComponentProps } from '@tanstack/solid-router'
+import type * as Solid from 'solid-js'
 
 const rootRoute = createRootRoute({
   component: RootComponent,
@@ -26,6 +28,32 @@ const rootRoute = createRootRoute({
   },
 })
 
+const SvgComponent = ({
+  // If included causes an error:
+  // Cannot set property className of #<SVGElement> which has only a getter
+  class: _className,
+  ...props
+}: Solid.JSX.IntrinsicElements['a']) => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" role="img">
+      <title id="rectTitle">Link in SVG</title>
+      <a {...props} aria-label="Open posts from SVG">
+        <rect
+          x="0"
+          y="0"
+          width="20"
+          height="20"
+          rx="4"
+          fill="blue"
+          stroke-width="2"
+        />
+      </a>
+    </svg>
+  )
+}
+
+const SvgLink = createLink(SvgComponent)
+
 function RootComponent() {
   return (
     <>
@@ -70,7 +98,10 @@ function RootComponent() {
           }}
         >
           This Route Does Not Exist
-        </Link>
+        </Link>{' '}
+        <div class="flex items-center">
+          <SvgLink to="/posts" />
+        </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/react-router/src/link.tsx

@@ -243,7 +243,9 @@ export function useLinkProps<
   // The click handler
   const handleClick = (e: React.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 = target !== undefined ? target : elementTarget
 
     if (

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).getAttribute(
+      'target',
+    )
     const effectiveTarget =
       local.target !== undefined ? local.target : elementTarget