Creating a link with Material UI - Add example in doc?

[nick-keller]

Hello,
I am using MUI as my components library, and I am trying to make a link.

My code

import { FC } from 'react'
import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material'
import {
  Link as LocationLink,
  LinkProps as LocationLinkProps,
} from 'react-location'

export const Link: FC<MuiLinkProps & LocationLinkProps> = ({
  children,
  ...rest
}) => {
  return (
    <MuiLink component={LocationLink} {...rest}>
      {children}
    </MuiLink>
  )
}

And somewhere else in my code:

      <Link
        sx={{ mt: 2 }} // MUI prop
        to="/my-page" // React Location prop
      >
        My link
      </Link>

The issue

That work just fine, but I get an warning in the console:

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

Check the render method of `MuiButtonBaseRoot`.

Has anyone encountered and solved the issue?

Documentation suggestion

Once I have a flawless solution, maybe it could be a great addition to the examples section of the doc! (happy to contribute)

[frontendlane]

This continues to be a problem in @tanstack/react-router.

<Link> from @tanstack/react-router cannot be given a ref, which is a requirement for using Mui's component prop.

@tannerlinsley if I'm getting this right @tanstack/react-router's <Link> needs to be built using React.forwardRef (instead of a regular functional component) for this to work.

[tannerlinsley]

router/packages/react-router/src/index.tsx

Line 265 in 6f0f747

export const Link: LinkFn = React.forwardRef((props: any, ref) => {

[StevenACoffman]

See https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#mui-example

TanStack Router

TanStack Router supports custom links through the createLink helper function. More information about createLink can be found in their documentation.

import { createLink, type LinkComponent } from '@tanstack/react-router'
import { Link as MUILink } from '@mui/material'

const CustomLink = createLink(MUILink)

function IndexPage() {
  return (
    <CustomLink to="/about" search={{ name: 'test' }}>
      Link
    </CustomLink>
  );
}