路由库

默认情况下，导航使用原生的 <a> 元素执行。您可以自定义它，例如，使用 Next.js 的 Link 或 react-router。

导航组件

有两个主要组件可用于执行导航。最常见的是 Link，正如其名称所示。它渲染一个原生的 <a> 元素并将 href 应用为属性。

您还可以使按钮执行导航操作。如果您的组件扩展了 ButtonBase，提供 href 属性将启用链接模式。例如，对于 Button 组件

全局主题 Link

在实际应用中，使用原生的 <a> 元素通常是不够的。您可以通过系统地使用增强的 Link 组件来改善用户体验。Material UI 主题允许您配置此组件一次。例如，对于 react-router

import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router';
import { LinkProps } from '@mui/material/Link';

const LinkBehavior = React.forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props;
  // Map href (Material UI) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

const theme = createTheme({
  components: {
    MuiLink: {
      defaultProps: {
        component: LinkBehavior,
      } as LinkProps,
    },
    MuiButtonBase: {
      defaultProps: {
        LinkComponent: LinkBehavior,
      },
    },
  },
});

component 属性

您可以使用 component 属性实现与第三方路由库的集成。您可以在组合指南中了解有关此属性的更多信息。

React Router 示例

这里有一些使用 React Router 的 Link 组件的演示，React Router。您可以将相同的策略应用于所有组件：BottomNavigation、Card 等。

Link

Button

注意：当按钮基础组件识别出要渲染一个没有原生 <button> 元素的按钮的意图时，它会添加 role="button" 属性。这在渲染链接时可能会造成问题。如果您没有使用 href、to 或 component="a" 属性之一，则需要覆盖 role 属性。上面的演示通过在展开属性之后设置 role={undefined} 来实现这一点。

const LinkBehavior = React.forwardRef((props, ref) => (
  <RouterLink ref={ref} to="/" {...props} role={undefined} />
));

Tabs

List

更多示例

Next.js Pages Router

此示例文件夹提供了将 Next.js 的 Link 组件与 Material UI 一起使用的适配器。

• 适配器的第一个版本是 NextLinkComposed 组件。此组件没有样式，仅负责处理导航。属性 href 已重命名为 to，以避免命名冲突。这类似于 react-router 的 Link 组件。

  import Button from '@mui/material/Button';
  import { NextLinkComposed } from '../src/Link';
  
  export default function Index() {
    return (
      <Button
        component={NextLinkComposed}
        to={{
          pathname: '/about',
          query: { name: 'test' },
        }}
      >
        Button link
      </Button>
    );
  }
  

  复制已复制（或 $keyC）

• 适配器的第二个版本是 Link 组件。此组件是有样式的。它将 Material UI Link 组件与 NextLinkComposed 一起使用。

  import Link from '../src/Link';
  
  export default function Index() {
    return (
      <Link
        href={{
          pathname: '/about',
          query: { name: 'test' },
        }}
      >
        Link
      </Link>
    );
  }
  

  复制已复制（或 $keyC）