CustomLink (createLink) and forwardRef?

[jameslawson]

I've been following the pattern in documentation here: https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#createlink-for-cross-cutting-concerns

import * as React from 'react'
import { createLink, LinkComponent } from '@tanstack/react-router'

interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  // Add any additional props you want to pass to the anchor element
}

const BasicLinkComponent = React.forwardRef<HTMLAnchorElement, BasicLinkProps>(
  (props, ref) => {
    return (
      <a ref={ref} {...props} className={'block px-3 py-2 text-blue-700'} />
    )
  },
)

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent preload={'intent'} {...props} />
}

This pattern has worked really well, it's a big improvement over the previous guidance and for me, in most cases it works great!
However, as it is CustomLink component is not able to foward refs which makes it incompatible with some MUI components which often expect their child components to be able to forwards ref via forwardRef (Tooltip docs, ).

Example 1:

// Tooltip expects CustomLink to forward refs
<Tooltip title="Foo">
   <CustomLink>Hello</CustomLink>
</Tooltip>

Example 2:

// Tabs expects CustomLink to forward refs
<Tabs>
   <CustomLink>Hello</CustomLink>
</Tabs>

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Is there any guidance on how to modify CustomLink in the example so that it uses forwardRef? Right now when I try to do it, no matter what I try, I can't get the TypeScript types to agree. I've been going in circles but most errors are around getting the ref types to agree (agreement between: ref parameter of forwardRef fn and ref prop of CreatedLinkComponent) Any ideas?

export const CustomLink  = forwardRef<HTMLAnchorElement, LinkComponentProps>((props, ref) => {
   return <CreatedLinkComponent ref={ref} preload={'intent'} {...props} /> 
                                    ^^^^^^
});

Type 'ForwardedRef<HTMLAnchorElement>' is not assignable to type 'LegacyRef<never> | undefined'.
  Type 'MutableRefObject<HTMLAnchorElement | null>' is not assignable to type 'LegacyRef<never> | undefined'.
    Type 'MutableRefObject<HTMLAnchorElement | null>' is not assignable to type 'RefObject<never>'.
      Types of property 'current' are incompatible.
        Type 'HTMLAnchorElement | null' is not assignable to type 'null'.
          Type 'HTMLAnchorElement' is not assignable to type 'null'.ts(2322)

[RMHonor]

Are you restricted to using React 18? In React 19, ref becomes just another prop, so you can do this:

const MUIButton: React.FC<ButtonProps<"a">> = (props) => <Button component="a" {...props} />;
export const TanStackButton = createLink(MUIButton);

And then the ref forwarding seems to work fine.

Alternatively, you can wrap your comment in a span, so the Tooltip applies to this span. Although I know this isn't ideal.