路由函式庫

預設情況下，導航是使用原生的 <a> 元素執行。您可以自訂它，例如，使用 Next.js 的 Link 或 react-router。

導航組件

有兩個主要的組件可用於執行導航。最常見的是 Link，正如其名稱可能暗示的那樣。它渲染一個原生的 <a> 元素並應用 href 作為屬性。

您也可以使按鈕執行導航操作。如果您的組件擴展了 ButtonBase，提供 href 屬性將啟用連結模式。例如，使用 Button 組件

全域主題連結

在真實應用程式中，僅使用原生的 <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 組件 的演示。您可以將相同的策略應用於所有組件：BottomNavigation、Card 等。

連結

按鈕

注意：當按鈕基礎組件識別出要渲染按鈕但沒有原生 <button> 元素的意圖時，它會添加 role="button" 屬性。當渲染連結時，這可能會產生問題。如果您未使用 href、to 或 component="a" 屬性之一，則需要覆寫 role 屬性。上面的演示透過在展開屬性之後設定 role={undefined} 來實現此目的。

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

分頁標籤

列表

更多範例

Next.js Pages Router

範例資料夾提供了使用 Material UI 的 Next.js 的 Link 組件 的轉接器。

• 轉接器的第一個版本是 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）