動態路由是什麼呢? 是利用切換url帶的參數改變畫面的內容，最常使用到的地方應該就是資料的詳細頁面，以一般的網拍來說，我們瀏覽的產品列表頁面為/product，點選喜歡的商品後會進到產品詳細頁面/product/:id，此處的:id會找尋資料庫中有相同id的產品資料渲染到畫面中，這樣我們就可以在產品詳細頁看到那樣商品的資訊。

動態路由設定

接續先前的範例，新增一個product-detail的路徑，path給予一個:id，在同樣的頁面顯示不同內容。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/product" element={<Product />} />
  <Route path="/product-detail/:id" element={<ProductDetail />} />
</Routes>

在產品頁面加上選單

import { Link } from "react-router-dom"
export function Product() {
  return <>
    <h1>Product</h1>
    <Link to="/product-detail/1">detail-1</Link>
    <br />
    <Link to="/product-detail/2">detail-2</Link>
  </>
}

此時已經可以做切換頁面的動作了，可是不管是點detail-1或detail-2，在畫面中都只有顯示Product detail，所以我們要再多做一個補充!

useParams()

在productDetail頁面我們加上useParams()這個hook，他的功能可以回傳目前url所帶的動態參數，也就是/product-detail/後的數字。

import { useParams } from "react-router-dom"
export function ProductDetail() {
    const { id } = useParams();
    return <h1>Product detail {id}</h1>
}

如此一來在切換的時候就可以看到Product detail後有不同的數值，這邊附上實作範例。