`<NavLink>`

<NavLink> 是一種特殊的 <Link>，知道它是否為「作用中」、「待處理」或「過渡中」。這在以下幾種情境中非常實用

建立導覽功能表時，例如麵包屑或一系列標籤，用於顯示出目前選取的為哪一項
為輔助技術（如螢幕報讀機）提供有用的背景
提供「過渡中」值，以便更細緻地控制檢視轉換

import { NavLink } from "react-router-dom";

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

預設 `active` 類別

預設情況下，在 <NavLink> 組件於作用中時會新增一個 active 類別，以便可使用 CSS 為它套用樣式。

<nav id="sidebar">
  <NavLink to="/messages" />
</nav>

#sidebar a.active {
  color: red;
}

`className`

className 屬性會像常規 className 一樣運作，但你也可以傳遞一個函式，根據連結的作用中和待處理狀態自訂套用的類別名稱。

<NavLink
  to="/messages"
  className={({ isActive, isPending, isTransitioning }) =>
    [
      isPending ? "pending" : "",
      isActive ? "active" : "",
      isTransitioning ? "transitioning" : "",
    ].join(" ")
  }
>
  Messages
</NavLink>

`style`

style 屬性會像常規 style 屬性一樣運作，但你也可以傳遞一個函式，根據連結的作用中和待處理狀態自訂套用的樣式。

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

`children`

您可以傳遞一組顯示特質作為子特質，來根據 <NavLink> 的 active 和 pending 狀態自訂內容，這對於變更內部元素的樣式很有用。

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

`結束`

結束 特質變更 active 和 pending 狀態的比對邏輯，以便僅與 NavLink 的 目標 路徑的「結束」比對。如果 URL 比 目標 長，則不再視為 active。

連結	目前的 URL	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="/tasks/" end />`	`/tasks`	false
`<NavLink to="/tasks/" end />`	`/tasks/`	true

關於根路線的連結注意事項

<NavLink to="/"> 是例外案例，因為每個 URL 都會比對到 /。為了避免這項比對預設為每個路線，它會略過 結束 特質，並僅在您處於根路線時比對。

`區分大小寫`

加入 區分大小寫 特質會變更比對邏輯，使其區分大小寫。

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

`aria-current`

當 NavLink 處於活動狀態時，它會自動套用 <a aria-current="page"> 至底層錨定標籤。查看 MDN 上的 aria-current。

`重新載入文件`

重新載入文件 屬性可略過客戶端路由，並讓瀏覽器正常處理轉換（就好像它是 <a href> 一樣）。

`unstable_viewTransition`

unstable_viewTransition 特質為此導覽啟用檢視轉換，方法是將最終狀態更新封裝到 document.startViewTransition() 中。預設情況下，會在轉換過程中將 transitioning 類別新增至 <a> 元素，您可以使用這個元素自訂檢視轉換。

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

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

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

您還可以使用傳遞至 children 的 className/style 特質或顯示特質，根據 isTransitioning 值進一步自訂。

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

請注意，此 API 標記為不穩定，可能會在沒有主要版本發布的情況下進行重大變更。

<NavLink>

預設 active 類別

className

style

children

結束

區分大小寫

aria-current

重新載入文件

unstable_viewTransition