`<NavLink>`

包裝 <Link>，並提供額外的 props 來設定啟用和等待狀態的樣式。

import { NavLink } from "@remix-run/react";

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>;

自動屬性

`.active`

當 <NavLink> 元件處於啟用狀態時，會新增一個 active 類別，因此您可以使用 CSS 來設定其樣式。

<NavLink to="/messages" />

a.active {
  color: red;
}

`aria-current`

當 NavLink 處於啟用狀態時，它會自動將 <a aria-current="page"> 應用於底層的錨點標籤。請參閱 MDN 上的 aria-current。

`.pending`

當 <NavLink> 元件在導航過程中處於等待狀態時，會新增一個 pending 類別，因此您可以使用 CSS 來設定其樣式。

<NavLink to="/messages" />

a.pending {
  color: red;
}

`.transitioning`

當 <NavLink viewTransition> 元件在導航過程中處於轉場狀態時，會新增一個 transitioning 類別，因此您可以使用 CSS 來設定其樣式。

<NavLink to="/messages" viewTransition />

a.transitioning {
  view-transition-name: my-transition;
}

Props

`className` 回呼函式

使用啟用和等待狀態進行回呼，以允許自訂應用的類別名稱。

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>

`style` 回呼函式

使用 active 和 pending 狀態回呼，以允許自訂套用的樣式。

<NavLink
  to="/messages"
  style={({ isActive, isPending }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
    };
  }}
>
  Messages
</NavLink>

`children` 回呼函式

使用 active 和 pending 狀態回呼，以允許自訂 <NavLink> 的內容。

<NavLink to="/tasks">
  {({ isActive, isPending }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

`end`

end 屬性會變更 active 和 pending 狀態的匹配邏輯，使其僅匹配 NavLinks 的 to 路徑的「結尾」。如果 URL 長於 to，則不再被視為 active。

連結	網址	isActive
`<NavLink to="/tasks" />`	`/tasks`	true
`<NavLink to="/tasks" />`	`/tasks/123`	true
`<NavLink to="/tasks" end />`	`/tasks`	true
`<NavLink to="/tasks" end />`	`/tasks/123`	false

<NavLink to="/"> 是一個特例，因為每個 URL 都會匹配 /。為了避免預設匹配每個路由，它實際上會忽略 end 屬性，僅在您位於根路由時才匹配。

`caseSensitive`

新增 caseSensitive 屬性會變更匹配邏輯，使其區分大小寫。

連結	網址	isActive
`<NavLink to="/SpOnGe-bOB" />`	`/sponge-bob`	true
`<NavLink to="/SpOnGe-bOB" caseSensitive />`	`/sponge-bob`	false

`viewTransition`

viewTransition 屬性透過將最終狀態更新包裝在 document.startViewTransition() 中，為此導覽啟用視圖轉換。預設情況下，在轉換期間，會將 transitioning 類別新增至 <a> 元素，您可以使用它來自訂視圖轉換。

a.transitioning p {
  view-transition-name: "image-title";
}

a.transitioning img {
  view-transition-name: "image-expand";
}

<NavLink to={to} viewTransition>
  <p>Image Number {idx}</p>
  <img src={src} alt={`Img ${idx}`} />
</NavLink>

您也可以使用 className/style 屬性或傳遞給 children 的渲染屬性，以根據 isTransitioning 值進一步自訂。

<NavLink to={to} viewTransition>
  {({ isTransitioning }) => (
    <>
      <p
        style={{
          viewTransitionName: isTransitioning
            ? "image-title"
            : "",
        }}
      >
        Image Number {idx}
      </p>
      <img
        src={src}
        alt={`Img ${idx}`}
        style={{
          viewTransitionName: isTransitioning
            ? "image-expand"
            : "",
        }}
      />
    </>
  )}
</NavLink>

`<Link>` 屬性

支援 <Link> 的所有其他屬性。

<NavLink>

自動屬性

.active

aria-current

.pending

.transitioning

Props

className 回呼函式

style 回呼函式

children 回呼函式

end

caseSensitive

viewTransition

<Link> 屬性