diff --git a/e2e/react-router/basic/src/main.tsx b/e2e/react-router/basic/src/main.tsx index 8bd8d5afcff..36e51066548 100644 --- a/e2e/react-router/basic/src/main.tsx +++ b/e2e/react-router/basic/src/main.tsx @@ -69,7 +69,23 @@ function RootComponent() { }} > This Route Does Not Exist - + {' '} +
+ + Link in SVG + + + + +
diff --git a/e2e/react-router/basic/tests/app.spec.ts b/e2e/react-router/basic/tests/app.spec.ts index 5ccdafa513b..ec0e24d8a40 100644 --- a/e2e/react-router/basic/tests/app.spec.ts +++ b/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() +}) diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx index 0c817e6d788..fb63cd36a68 100644 --- a/packages/react-router/src/link.tsx +++ b/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 (