fix: allow activeProps to infer component props

packages/react-router/src/link.tsx

@@ -819,9 +819,9 @@ export function useLinkProps<
   }
 
   return {
+    ...rest,
     ...resolvedActiveProps,
     ...resolvedInactiveProps,
-    ...rest,
     href: disabled
       ? undefined
       : next.maskedLocation
@@ -846,50 +846,65 @@ export function useLinkProps<
   }
 }
 
+type UseLinkReactProps<TComp> = TComp extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[TComp]
+  : React.PropsWithoutRef<
+      TComp extends React.ComponentType<infer TProps> ? TProps : never
+    > &
+      React.RefAttributes<
+        TComp extends
+          | React.FC<{ ref: infer TRef }>
+          | React.Component<{ ref: infer TRef }>
+          ? TRef
+          : never
+      >
+
 export type UseLinkPropsOptions<
   TRouter extends AnyRouter = RegisteredRouter,
   TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
   TTo extends string | undefined = '.',
   TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '.',
-> = ActiveLinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
+> = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+  UseLinkReactProps<'a'>
 
 export type ActiveLinkOptions<
+  TComp = 'a',
   TRouter extends AnyRouter = RegisteredRouter,
   TFrom extends string = string,
   TTo extends string | undefined = '.',
   TMaskFrom extends string = TFrom,
   TMaskTo extends string = '.',
-> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & ActiveLinkOptionProps
+> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+  ActiveLinkOptionProps<TComp>
 
-type ActiveLinkAnchorProps = Omit<
-  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type ActiveLinkProps<TComp> = Partial<
+  LinkComponentReactProps<TComp> & {
     [key: `data-${string}`]: unknown
-  },
-  'children'
+  }
 >
 
-export interface ActiveLinkOptionProps {
+export interface ActiveLinkOptionProps<TComp = 'a'> {
   /**
    * A function that returns additional props for the `active` state of this link.
    * These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
    */
-  activeProps?: ActiveLinkAnchorProps | (() => ActiveLinkAnchorProps)
+  activeProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)
   /**
    * A function that returns additional props for the `inactive` state of this link.
    * These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
    */
-  inactiveProps?: ActiveLinkAnchorProps | (() => ActiveLinkAnchorProps)
+  inactiveProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)
 }
 
 export type LinkProps<
+  TComp = 'a',
   TRouter extends AnyRouter = RegisteredRouter,
   TFrom extends string = string,
   TTo extends string | undefined = '.',
   TMaskFrom extends string = TFrom,
   TMaskTo extends string = '.',
-> = ActiveLinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+> = ActiveLinkOptions<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
   LinkPropsChildren
 
 export interface LinkPropsChildren {
@@ -902,32 +917,20 @@ export interface LinkPropsChildren {
       }) => React.ReactNode)
 }
 
-type LinkComponentReactProps<TComp> = React.PropsWithoutRef<
-  TComp extends React.FC<infer TProps> | React.Component<infer TProps>
-    ? TProps
-    : TComp extends keyof React.JSX.IntrinsicElements
-      ? Omit<React.HTMLProps<TComp>, 'children' | 'preload'>
-      : never
-> &
-  React.RefAttributes<
-    TComp extends
-      | React.FC<{ ref: infer TRef }>
-      | React.Component<{ ref: infer TRef }>
-      ? TRef
-      : TComp extends keyof React.JSX.IntrinsicElements
-        ? React.ComponentRef<TComp>
-        : never
-  >
+type LinkComponentReactProps<TComp> = Omit<
+  UseLinkReactProps<TComp>,
+  'children' | 'preload'
+>
 
 export type LinkComponentProps<
-  TComp,
+  TComp = 'a',
   TRouter extends AnyRouter = RegisteredRouter,
   TFrom extends string = string,
   TTo extends string | undefined = '.',
   TMaskFrom extends string = TFrom,
   TMaskTo extends string = '.',
 > = LinkComponentReactProps<TComp> &
-  LinkProps<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>
+  LinkProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>
 
 export type LinkComponent<TComp> = <
   TRouter extends RegisteredRouter = RegisteredRouter,

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

@@ -3710,4 +3710,93 @@ describe('createLink', () => {
     expect(customElement.hasAttribute('foo')).toBe(true)
     expect(customElement.getAttribute('foo')).toBe('bar')
   })
+
+  it('should pass activeProps and inactiveProps to the custom link', async () => {
+    const Button: React.FC<
+      React.PropsWithChildren<{
+        active?: boolean
+        foo?: boolean
+        overrideMeIfYouWant: string
+      }>
+    > = ({ active, foo, children, ...props }) => (
+      <button {...props}>
+        active: {active ? 'yes' : 'no'} - foo: {foo ? 'yes' : 'no'} - {children}
+      </button>
+    )
+
+    const ButtonLink = createLink(Button)
+
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <>
+          <ButtonLink
+            to="/"
+            overrideMeIfYouWant="Button1"
+            activeProps={{
+              active: true,
+              'data-hello': 'world',
+              overrideMeIfYouWant: 'overridden-by-activeProps',
+            }}
+            inactiveProps={{ foo: true }}
+          >
+            Button1
+          </ButtonLink>
+          <ButtonLink
+            to="/posts"
+            overrideMeIfYouWant="Button2"
+            activeProps={{
+              active: true,
+              'data-hello': 'world',
+            }}
+            inactiveProps={{
+              foo: true,
+              'data-hello': 'void',
+              overrideMeIfYouWant: 'overridden-by-inactiveProps',
+            }}
+          >
+            Button2
+          </ButtonLink>
+          <ButtonLink
+            to="/posts"
+            overrideMeIfYouWant="Button3"
+            activeProps={{
+              active: true,
+            }}
+            inactiveProps={{
+              active: false,
+            }}
+          >
+            Button3
+          </ButtonLink>
+        </>
+      ),
+    })
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const button1 = await screen.findByText('active: yes - foo: no - Button1')
+    expect(button1.getAttribute('data-hello')).toBe('world')
+    expect(button1.getAttribute('overrideMeIfYouWant')).toBe(
+      'overridden-by-activeProps',
+    )
+
+    const button2 = await screen.findByText('active: no - foo: yes - Button2')
+    expect(button2.getAttribute('data-hello')).toBe('void')
+    expect(button2.getAttribute('overrideMeIfYouWant')).toBe(
+      'overridden-by-inactiveProps',
+    )
+
+    const button3 = await screen.findByText('active: no - foo: no - Button3')
+    expect(button3.getAttribute('overrideMeIfYouWant')).toBe('Button3')
+  })
 })