延續上一篇 DAY23 的 React-router-dom 繼續往下介紹，
如果沒看過的朋友，建議可以先看上一篇哦！

本篇將介紹

動態路由參數
當前路由資訊
切換頁面 Scroll To Top

1.動態路由參數

useParams()

<BrowserRouter>
  <Routes>
    <Route path="/product/:id" element={<Product/>} />
  </Routes>
</BrowserRouter>;

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

const Product = () => {
  const params= useParams();

  return (
    <h1>{params.id}</h1>
 );
}

export default Product;

當 router 是動態路由時，useParams 可以取得 url 的 params

useSearchParams()

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

const Product = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  console.log(searchParams.get("id")); // 12
  console.log(searchParams.getAll("id")); // [12]

  const changeSearchParams = () => {
    setSearchParams({
      name: "foo",
      id: "456"
    });
  };

  return (
    <div>
      <h2>searchParams:</h2>
      <div>{searchParams.get("id")}</div>
      <button className="btn" onClick={changeSearchParams}>
        change Search Params
      </button>
    </div>
  );
};

export default Product;

可查找或設定 Query String 問號後面的 params，用法跟 useState() 一樣

如當前路徑為 /product?id=12

2.當前路由資訊

useLocation

1
2
3

import { useLocation } from "react-router-dom";
let location = useLocation();
console.log(location);

獲取當前 url 的各種屬性，你可以得到以下資訊

{
  pathname: "/hello/world",
  search: "?filter=123",
  hash: "#menu",
  state: null,
  key: "12345"
}

pathname：URL 路徑
search：Query String Params
hash：用於確定頁面滾動的具體位置
state：對於 window.history.state 的包裝
key：每個 Location 對象擁有一個唯一的 key，可以實現數據緩存

3.切換頁面 Scroll To Top

當在一個頁面將卷軸往下滾動，切換頁面後，會發現卷軸的位置還是在上個頁面切換的位置
就會像範例這樣

因為 SPA 滾動並不會重新改變卷軸位置，我們需要自行再做 Scroll to top 的設定

新增一個 ScrollToTop

helpers/ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

每當路由 pathname 改變時，卷軸就會回到頂部

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import NotFound from "./pages/NotFound";
import ScrollToTop from "./helpers/ScrollToTop";

export default function App() {
  return (
    <BrowserRouter>
      <Header />
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="page1" element={<Page1 />} />
        <Route path="page2" element={<Page2 />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

ScrollToTop 引入並放在 BrowserRouter 裡，就大功告成囉！

結語

路由的設定對 SPA 網站也是很重要的一環，路由的講解在這篇告一段落，其實不是太難，基本上學會這些就很夠用了，花一點時間來練習看看吧！!

本文為 IT 鐵人賽系列文你 React 了嗎? 30 天解鎖 React 技能

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

【DAY 24】React-router-dom 路由設定教學，實現頁面跳轉(下)