如何将 @tanstack/react-router Link 组件与 React MUI Link 组件结合起来？

Question

我正在使用 Tanstack Router Link 组件在我的应用程序中导航（类型安全）。但对于 UI，我想依赖 React MUI Link 组件。

这是我目前使用两种组合的方法（用于复制的游乐场）

    <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
      <MuiLink underline="hover" color="inherit">
        Tanstack Link rendered as MUI Link
      </MuiLink>
    </Link>

这对我来说感觉有点不对劲，因为我使用的 MUI Link 没有

href

属性。这看起来无效，控制台错误

在 HTML 中，

<a>

不能是

<a>

的后代。 这会导致水合错误。

如何渲染 MUI 链接但在后台使用路由器链接？

Answer 1

Tanstack 路由器有一个 createLink 来生成富含路由器属性的组件。官方示例：https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#mui-example

// ... Example from tanstack.com
import * as React from 'react'
import { createLink, LinkComponent } from '@tanstack/react-router'
import { Button, ButtonProps } from '@mui/material'

interface MUILinkProps extends Omit<ButtonProps, 'href'> {
  // Add any additional props you want to pass to the button
}

const MUILinkComponent = React.forwardRef<HTMLAnchorElement, MUILinkProps>(
  (props, ref) => {
    return <Button component={'a'} ref={ref} {...props} />
  },
)

const CreatedLinkComponent = createLink(MUILinkComponent)

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

但是，当我尝试将其用作其他 MUI 组件的插槽时，即

<ListItemButton component={CustomLink} ... >

我收到 MUI 警告：

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

这里给出了此警告的解释https://mui.com/material-ui/guides/composition/#caveat-with-refs，我使用了一个稍微简化的版本，没有额外的包装组件来避免警告：

// ... MyLink.tsx
import * as React from 'react';
import { createLink, LinkComponent } from '@tanstack/react-router';
import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';

type MUILinkProps = Omit<MuiLinkProps, 'href'>;

const MUILinkComponent = React.forwardRef<HTMLAnchorElement, MUILinkProps>(
  (props, ref) => {
    return <MuiLink ref={ref} {...props} />;
  }
);

export const MyLink: LinkComponent<typeof MUILinkComponent> =
  createLink(MUILinkComponent);

现在我们可以使用结合了 MUI 和 Tanstack 属性的类型安全组件：

<MyLink to="/" preload="intent" sx={{ color: "inherit" }}>
   Tanstack Link rendered as MUI Link
</MyLink>

stackblitz 游乐场