上一篇文章，我們學到了如何用Router、Routes 和 Route 來建立基本的路由設定，讓應用程式能在不同的路徑之間切換。

這篇文章主要針透過點擊連結進入不同頁面後，讓不同的 id 資料顯示自己的內容。

• <Link> —— 讓 React 負責處理頁面切換，而不是重新整理整個網站。
• Route Parameters（路由參數） —— 讓同一個頁面能根據網址上的參數，動態顯示不同內容。

<Link>

用來建立超連結（不會重新載入整個頁面）
加上 to 屬性指定跳轉路徑（例如 /）

<a href> 和 <Link> 的差別

在傳統的網頁開發中，如果我們想要新增一個超連結，最直覺的做法就是使用 <a href> 標籤。透過<a href> ，使用者點擊後就能導向到指定的網址，無論是跳轉到網站的其他頁面，還是連到外部資源等。

然而，在 React 這類的單頁應用程式 ( SPA, Single Page Application ) 中，如果使用 <a href>，每一次點擊就會觸發整個頁面的重新載入，導致速度較慢。因此，React Router 提供了 <Link> 元件，專門用來處理應用程式內部的頁面切換，讓操作更流暢。

比較

路由參數 (Route Parameter)

<Route path="/blogs/:id" element={<BlogDetails />} />
id: 表示路由的參數

為什麼需要路由參數 (Route Parameter)

在網站或 API 設計中，路由參數可以讓我們針對「不同的資源」使用相同的路徑格式，而不需要為每一個資源都寫成不同的路由

• 動態顯示內容
  例如：
  • /blogs/1 → 顯示 id 為 1 的文章
  • /blogs/2 → 顯示 id 為 2 的文章

不需要為每篇文章都建立一個新的路徑，使用一個通用模板 /blogs/:id 就可以

• 提高可重用性與維護性
  如果不用路由參數，就要寫很多固定路徑，會讓程式碼很冗長、不好維護
  使用路由參數，只要寫一次 /blogs/:id，程式就能根據不同的 id 取得對應內容。

• 更符合 RESTful API 設計
  RESTful API 裡常用路由參數來代表「某一個特定資源」
  例如：

  • GET /blogs → 取得所有文章
  • GET /blogs/:id → 取得某一篇文章

• 更好的使用者體驗
  使用者看到網址後面是 /blogs/2 就知道這是第 2 篇文章

但是元件要怎麼知道目前網址裡的 id 是多少？

使用 useParams() 這個Hook，就能直接讀取網址中的參數，並回傳一個物件

範例：

BlogDetails.js

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

const BlogDetails = () => {
  const { id } = useParams();

  return (
    <div className="blog-details">
      <h2>第 { id } 篇文章</h2>
    </div>
  );
}
 
export default BlogDetails;

const { id } = useParams(); ：取得網址上的 id
當使用者進入 /blogs/1 或 /blogs/2 等等，BlogDetails 元件就能透過 useParams() 取得網址中的 id，並根據 id 顯示對應的文章內容

BlogList.js

import { Link } from 'react-router-dom';

const BlogList = ({ blogs }) => {
  return (
    <div className="blog-list">
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id} >
          <Link to={`/blogs/${blog.id}`}>
            <h2>{ blog.title }</h2>
            <p>Written by { blog.author }</p>
          </Link>
        </div>
      ))}
    </div>
  );
}
 
export default BlogList;

<Link to={/blogs/${blog.id}}>：根據每篇文章的 id 產生不同的路徑

我們在撰寫 JSON Server 時，有說到必須要寫唯一 id；而在這裡會使用到：每個 id 都會對應到相對應的頁面內容

瀏覽器執行畫面

補充：<NavLink>

<NavLink> 是 <Link> 的加強版，常利用在選單或是導覽列
除了具備 <Link> 的功能之外，還可以自動幫目前所在的頁面加上 active 樣式，讓 UI 更直覺

使用方式：

<NavLink 
  to="/" 
  className={({ isActive }) => (isActive ? "active" : "")}
>
  所有文章
</NavLink>

當前頁面路徑符合 / 時，這個連結就會套用 active class，使用者就可以針對這個狀態去做樣式設定（例如顏色、粗細）

範例：

瀏覽器執行畫面