use _asChild prop on the link for solid, like radix ui

Author: birkskyum

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

@@ -70,7 +70,25 @@ 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>
+            <Link to="/posts" aria-label="Open posts from SVG" _asChild>
+              <a>
+                <rect
+                  x="0"
+                  y="0"
+                  width="20"
+                  height="20"
+                  rx="4"
+                  fill="blue"
+                  stroke-width="2"
+                />
+              </a>
+            </Link>
+          </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,10 @@ 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
 
@@ -470,6 +473,12 @@ export interface ActiveLinkOptionProps<TComp = 'a'> {
    * These props override other props passed to the link (`style`'s are merged, `class`'s are concatenated)
    */
   inactiveProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)
+  /**
+   * When true, the Link will not render its own wrapper element.
+   * Instead, it will pass its props to its single child element.
+   * Useful for custom components or SVG elements where you need precise control over the rendered element.
+   */
+  _asChild?: boolean | Solid.ValidComponent
 }
 
 export type LinkProps<
@@ -579,10 +588,22 @@ export const Link: LinkComponent<'a'> = (props) => {
     return ch satisfies Solid.JSX.Element
   })
 
+  // For _asChild, use Dynamic to render the custom component
+  if (local._asChild) {
+    return (
+      <Dynamic component={local._asChild} {...(linkProps as any)}>
+        {children()}
+      </Dynamic>
+    )
+  }
+
+  // Default rendering - just use regular anchor element
+  // This works for HTML contexts; SVG links inside SVGs won't work properly
+  // due to Solid's compile-time namespace determination
   return (
-    <Dynamic component={local._asChild ? local._asChild : 'a'} {...linkProps}>
+    <a {...(linkProps as any)}>
       {children()}
-    </Dynamic>
+    </a>
   )
 }