今天我們要來實作如何在左側垂直導航欄中使用 NavLink 來切換不同的頁面，

1. 安裝 react-router-dom

延續昨天的內容，如果還沒安裝react-router-dom可以用以下指令安裝：
npm install react-router-dom

2. 建立頁面 (在 src/pages 資料夾下)

我目前有以下幾個頁面：

• Home.jsx
• Favorite.jsx(新增)
• Place.jsx
• Schedule.jsx(新增)

3. 建立 Navbar 組件 (在 src/components 資料夾下)

創建一個 Navbar.jsx，並使用 NavLink 來做導航。
其中，NavLink就是從react-router-dom中導入的．

4. 設定 React Router

延續昨天的內容，在 src 資料夾下的 App.jsx，引入 BrowserRouter、Routes 和 Route 來設定路由。

5. 調整組件

前幾天的範例，我們將Navbar的各個組件獨立成：

• PlaceBar
• FavoriteBar
• ScheduleBar
  並放在Header內，現在，我們要調整一下：

原本PlaceBar、FavoriteBar以及ScheduleBar的排版我們都可以直接複製貼上到NavBar裡面，並且將原本的這些Bar組件刪掉或是註解掉

NavBar程式碼

import { NavLink } from "react-router-dom";
import styles from "./navbar.module.css";
import { EnvironmentFilled } from "@ant-design/icons";
import { HeartFilled } from "@ant-design/icons";
import { ScheduleFilled } from "@ant-design/icons";

export default function NavBar() {
  return (
    <div>
      <NavLink
        to="/"
        className={({ isActive }) =>
          isActive ? styles.navboxActive : styles.navbox
        }
      >
        <div className={styles.navItem}>
          <EnvironmentFilled style={{ fontSize: "24px", color: "bisque" }} />
          <h1 className={styles.title}>Site</h1>
        </div>
      </NavLink>
      <NavLink
        to="/favorite"
        className={({ isActive }) =>
          isActive ? styles.navboxActive : styles.navbox
        }
      >
        <div className={styles.navItem}>
          <HeartFilled style={{ fontSize: "24px", color: "bisque" }} />
          <h1 className={styles.title}>Favorite</h1>
        </div>
      </NavLink>
      <NavLink
        to="/schedule"
        className={({ isActive }) =>
          isActive ? styles.navboxActive : styles.navbox
        }
      >
        <div className={styles.navItem}>
          <ScheduleFilled style={{ fontSize: "24px", color: "bisque" }} />
          <h1 className={styles.title}>Schedule</h1>
        </div>
      </NavLink>
    </div>
  );
}

這段程式碼是使用 React Router 的 NavLink 元件來實現導航功能。當前導航項處於“活躍”狀態（即對應的路由與當前網址相匹配）時，會自動應用一個特定的樣式。這裡的重點在於 NavLink 的 className 屬性中使用 isActive 的方式。以下是詳細解釋：

1. NavLink 的作用

NavLink 是 react-router-dom 提供的一個專門用於導航的組件，它的作用類似於 HTML 的 <a> 元素。與普通的 <Link> 不同的是，NavLink 可以根據當前路徑自動添加樣式或類名，表示這個鏈接當前是否處於“活躍(被點擊）”狀態。

2. isActive 的用法

NavLink 可以接受一個 className 或 style 屬性，這個屬性可以是一個函數。這個函數接受一個包含 isActive 屬性的對象。isActive 是一個布林值，當 NavLink 對應的 to 路徑與當前的瀏覽器路徑匹配時，isActive 會返回 true，否則為 false。

3. className 屬性中使用 isActive

在這段程式碼中，className 是一個函數，這個函數根據 isActive 的值來決定要使用的樣式類名：

className={({ isActive }) => isActive ? styles.navboxActive : styles.navbox }

• ({ isActive }) => ... 是一個解構賦值，從 NavLink 傳遞的參數中取出 isActive。
• 當 isActive 為 true 時，styles.navboxActive 會被應用到 NavLink，代表這個鏈接是“活躍”的。
• 當 isActive 為 false 時，styles.navbox 會被應用到 NavLink，表示這個鏈接不是“活躍”的。

4. 樣式變化示例

.navbox {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin: 0.5rem 1rem;
  }
  
  /* 只對未處於 active 狀態的 navbox 應用 hover 樣式 */
  .navbox:not(.navboxActive):hover {
    background: rgba(188, 196, 249, 0.17);
    border-radius: 8px;
  }
  
  .title {
    font-size: larger;
    color: aliceblue;
  }
  
  /* active 狀態的 navbox 樣式 */
  .navboxActive {
    composes: navbox;
    background: rgba(172, 182, 244, 0.411);
    border-radius: 8px;
  }
  
  .navItem {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin: 0.5rem 1rem;
  }

這樣一來：

• 當 / 路徑對應 NavLink 為活躍狀態（當前 URL 是 http://localhost:3000/ 時），它會應用 styles.navboxActive（背景色為藍色）。
• 當 /favorite 路徑對應的 NavLink 為活躍狀態（當前 URL 是 http://localhost:3000/favorite 時），它會應用 styles.navboxActive。
• 同理，當 /schedule 路徑對應 NavLink 為活躍狀態（當前 URL 是 http://localhost:3000/schedule 時），它會應用 styles.navboxActive。

5. 總結

• NavLink 用於導航，並且可以根據當前路徑設置活躍狀態的樣式。
• isActive 是一個布林值，當路徑匹配時為 true，否則為 false。
• 使用 isActive 可以根據當前狀態動態設置 NavLink 的樣式。

這種方式非常適合製作導航欄，當前項目處於Active狀態時用不同樣式顯示。