React-router (3) 動態路由

發表於 分類於
React-router 動態路由 設定

動態路由設定

  1. 在 path 上用 : 設定動態路由
1
2
3
4
<Route path="/album" element={<AlbumLayout />}>
  <Route index element={<AlbumIndex />}></Route>
  <Route path=":id" element={<AlbumPhoto />}></Route>
</Route>
  1. 在元件內用 useParams 取出動態路由值
1
2
3
4
5
import { useParams } from "react-router-dom";

export default function AlbumPhoto() {
  const { id } = useParams();
}

取得路由參數

1
http://localhost:3000/album/search?query=building

上面網址中 ? 後面的 query 就是網址參數，以下說明 React-router 如何取得網址參數

  1. 元件內將方法 useSearchParams 引入
1
import { useSearchParams } from "react-router-dom";
  1. 在元件內使用方法
1
2
3
export default function AlbumSearch() {
  const [searchParams, setsearchParams] = useSearchParams();
}
  • searchParams.get(‘參數名稱’): 取得參數的值
  • setsearchParams: 將值寫入參數
1
2
3
4
// 帶入物件，key為參數名稱，value 為參數值
setsearchParams({
  query: e.target.value,
});