React Router 中的Link 和mui(Material UI)中的Link 如何一起使用

19 阅读2分钟

在 React 项目中,可能会遇到需要同时使用 React RouterLink 和 MUI 的 Link 的情况。React RouterLink 组件负责页面导航,而 MUI 的 Link 组件主要负责样式。因此,可以将这两个组件结合起来,使得导航和样式都能够得到满足。

1. 直接嵌套使用

最简单的方法是直接将 MUI 的 Link 包裹在 React RouterLink 中,这样可以保持 MUI 样式的同时实现页面导航。

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@mui/material/Link';

function MyComponent() {
  return (
    <Link component={RouterLink} to="/about">
      Go to About Page
    </Link>
  );
}

export default MyComponent;

在这个例子中,MUI 的 Linkcomponent 属性被用来指定它渲染 React RouterLink。这使得 MUI 的 Link 保持了其样式特性,同时也具有了 React Router 的导航功能。

2. 使用 forwardRef 传递引用

如果你需要对 Link 组件进行进一步的定制,或者需要处理 ref,可以使用 React.forwardRef 来创建一个自定义的 Link 组件。

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@mui/material/Link';

const CustomLink = React.forwardRef((props, ref) => (
  <RouterLink ref={ref} {...props} />
));

function MyComponent() {
  return (
    <Link component={CustomLink} to="/about">
      Go to About Page
    </Link>
  );
}

export default MyComponent;

3. 使用 MuiLinkRouterLink 的结合

有时候,你可能希望直接使用 MUILink 组件但同时让它具有 React Router 的功能,MUI 允许通过 component 属性将 RouterLink 作为它的底层实现:

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import Link from '@mui/material/Link';

function MyComponent() {
  return (
    <Link component={RouterLink} to="/about" underline="none" color="inherit">
      Go to About Page
    </Link>
  );
}

export default MyComponent;

在这个例子中,underline="none"color="inherit" 是 MUI Link 组件的属性,用于控制样式,而 component={RouterLink}RouterLink 用作底层实现,以处理路由逻辑。

总结

通过以上方法,可以结合使用 React RouterLink 和 MUI 的 Link,既能实现页面导航,又能保留 MUI 的样式特性。根据具体需求选择最适合的实现方式。