fix: don't leak internal props in Link (#7138)

Author: schiller-manuel

.changeset/calm-walls-begin.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-router': patch
+'@tanstack/solid-router': patch
+'@tanstack/vue-router': patch
+---
+
+Fix `Link` to keep internal routing props like `preloadIntentProximity`, `from`, and `unsafeRelative` from leaking to rendered DOM elements across React, Solid, and Vue.

packages/react-router/src/link.tsx

@@ -64,6 +64,7 @@ export function useLinkProps<
     to,
     preload: userPreload,
     preloadDelay: userPreloadDelay,
+    preloadIntentProximity: _preloadIntentProximity,
     hashScrollIntoView,
     replace,
     startTransition,

packages/react-router/tests/link.test.tsx

@@ -177,6 +177,96 @@ describe('Link', () => {
     ).rejects.toThrow()
   })
 
+  test('does not forward internal Link props to the DOM', async () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const internalPropNames = [
+      'activeProps',
+      'inactiveProps',
+      'activeOptions',
+      'to',
+      'from',
+      'preload',
+      'preloadDelay',
+      'preloadIntentProximity',
+      'hashScrollIntoView',
+      'replace',
+      'startTransition',
+      'resetScroll',
+      'viewTransition',
+      'ignoreBlocker',
+      'params',
+      'search',
+      'hash',
+      'state',
+      'mask',
+      'reloadDocument',
+      'unsafeRelative',
+    ].map((propName) => propName.toLowerCase())
+
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <Link
+          to="/posts"
+          from="/"
+          activeProps={{ className: 'active' }}
+          inactiveProps={{ className: 'inactive' }}
+          activeOptions={{
+            exact: true,
+            includeHash: true,
+            includeSearch: true,
+          }}
+          preload="intent"
+          preloadDelay={50}
+          preloadIntentProximity={123}
+          hashScrollIntoView={true}
+          replace={true}
+          startTransition={true}
+          resetScroll={true}
+          viewTransition={true}
+          ignoreBlocker={true}
+          params={{}}
+          search={{ foo: 'bar' }}
+          hash="details"
+          state={{}}
+          mask={{ to: '/posts', hash: 'masked' }}
+          reloadDocument={true}
+          unsafeRelative="path"
+        >
+          Posts
+        </Link>
+      ),
+    })
+
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => <h1>Posts</h1>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+      history,
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postsLink = await screen.findByRole('link', { name: 'Posts' })
+    const renderedAttributeNames = postsLink
+      .getAttributeNames()
+      .map((attributeName) => attributeName.toLowerCase())
+
+    for (const propName of internalPropNames) {
+      expect(renderedAttributeNames).not.toContain(propName)
+    }
+
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+  })
+
   test('when the current route is the root', async () => {
     const rootRoute = createRootRoute()
     const indexRoute = createRoute({

packages/solid-router/src/link.tsx

@@ -63,6 +63,7 @@ export function useLinkProps<
       'to',
       'preload',
       'preloadDelay',
+      'preloadIntentProximity',
       'hashScrollIntoView',
       'replace',
       'startTransition',
@@ -120,6 +121,7 @@ export function useLinkProps<
     'mask',
     'reloadDocument',
     'unsafeRelative',
+    'from',
   ])
 
   const currentLocation = Solid.createMemo(

packages/solid-router/tests/link.test.tsx

@@ -174,6 +174,90 @@ describe('Link', () => {
     ).rejects.toThrow()
   })
 
+  test('does not forward internal Link props to the DOM', async () => {
+    const internalPropNames = [
+      'activeProps',
+      'inactiveProps',
+      'activeOptions',
+      'to',
+      'from',
+      'preload',
+      'preloadDelay',
+      'preloadIntentProximity',
+      'hashScrollIntoView',
+      'replace',
+      'startTransition',
+      'resetScroll',
+      'viewTransition',
+      'ignoreBlocker',
+      'params',
+      'search',
+      'hash',
+      'state',
+      'mask',
+      'reloadDocument',
+      'unsafeRelative',
+    ].map((propName) => propName.toLowerCase())
+
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <Link
+          to="/posts"
+          from="/"
+          activeProps={{ class: 'active' }}
+          inactiveProps={{ class: 'inactive' }}
+          activeOptions={{
+            exact: true,
+            includeHash: true,
+            includeSearch: true,
+          }}
+          preload="intent"
+          preloadDelay={50}
+          preloadIntentProximity={123}
+          hashScrollIntoView={true}
+          replace={true}
+          startTransition={true}
+          resetScroll={true}
+          viewTransition={true}
+          ignoreBlocker={true}
+          params={{}}
+          search={{ foo: 'bar' }}
+          hash="details"
+          state={{}}
+          mask={{ to: '/posts', hash: 'masked' }}
+          reloadDocument={true}
+          unsafeRelative="path"
+        >
+          Posts
+        </Link>
+      ),
+    })
+
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => <h1>Posts</h1>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+    })
+
+    render(() => <RouterProvider router={router} />)
+
+    const postsLink = await screen.findByRole('link', { name: 'Posts' })
+    const renderedAttributeNames = postsLink
+      .getAttributeNames()
+      .map((attributeName) => attributeName.toLowerCase())
+
+    for (const propName of internalPropNames) {
+      expect(renderedAttributeNames).not.toContain(propName)
+    }
+  })
+
   test('when a Link has children', async () => {
     const ChildComponent = vi.fn().mockReturnValue(<button>Posts</button>)
     const rootRoute = createRootRoute()

packages/vue-router/src/link.tsx

@@ -597,58 +597,57 @@ function getLinkEventHandlers(
   }
 }
 
-const propsUnsafeToSpread = new Set([
-  'activeProps',
-  'inactiveProps',
-  'activeOptions',
-  'to',
-  'preload',
-  'preloadDelay',
-  'hashScrollIntoView',
-  'replace',
-  'startTransition',
-  'resetScroll',
-  'viewTransition',
-  'children',
-  'target',
-  'disabled',
-  'style',
-  'class',
-  'onClick',
-  'onBlur',
-  'onFocus',
-  'onMouseEnter',
-  'onMouseenter',
-  'onMouseLeave',
-  'onMouseleave',
-  'onMouseOver',
-  'onMouseover',
-  'onMouseOut',
-  'onMouseout',
-  'onTouchStart',
-  'onTouchstart',
-  'ignoreBlocker',
-  'params',
-  'search',
-  'hash',
-  'state',
-  'mask',
-  'reloadDocument',
-  '_asChild',
-  'from',
-  'additionalProps',
-])
-
-// Create safe props that can be spread
 const getPropsSafeToSpread = (options: AnyLinkPropsOptions) => {
-  const result: Record<string, unknown> = {}
-  for (const key in options) {
-    if (!propsUnsafeToSpread.has(key)) {
-      result[key] = (options as Record<string, unknown>)[key]
-    }
-  }
-
-  return result
+  const {
+    activeProps: _activeProps,
+    inactiveProps: _inactiveProps,
+    activeOptions: _activeOptions,
+    to: _to,
+    preload: _preload,
+    preloadDelay: _preloadDelay,
+    preloadIntentProximity: _preloadIntentProximity,
+    hashScrollIntoView: _hashScrollIntoView,
+    replace: _replace,
+    startTransition: _startTransition,
+    resetScroll: _resetScroll,
+    viewTransition: _viewTransition,
+    children: _children,
+    target: _target,
+    disabled: _disabled,
+    style: _style,
+    class: _class,
+    onClick: _onClick,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    onMouseEnter: _onMouseEnter,
+    onMouseenter: _onMouseenter,
+    onMouseLeave: _onMouseLeave,
+    onMouseleave: _onMouseleave,
+    onMouseOver: _onMouseOver,
+    onMouseover: _onMouseover,
+    onMouseOut: _onMouseOut,
+    onMouseout: _onMouseout,
+    onTouchStart: _onTouchStart,
+    onTouchstart: _onTouchstart,
+    ignoreBlocker: _ignoreBlocker,
+    params: _params,
+    search: _search,
+    hash: _hash,
+    state: _state,
+    mask: _mask,
+    reloadDocument: _reloadDocument,
+    unsafeRelative: _unsafeRelative,
+    _asChild: __asChild,
+    from: _from,
+    additionalProps: _additionalProps,
+    ...propsSafeToSpread
+  } = options as AnyLinkPropsOptions & {
+    additionalProps?: unknown
+    children?: unknown
+    _asChild?: unknown
+  }
+
+  return propsSafeToSpread
 }
 
 function getIsActive({
@@ -872,6 +871,7 @@ const LinkImpl = Vue.defineComponent({
     'to',
     'preload',
     'preloadDelay',
+    'preloadIntentProximity',
     'activeProps',
     'inactiveProps',
     'activeOptions',