Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

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

cover

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

本篇將介紹

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

1.動態路由參數

useParams()

1
2
3
4
5
<BrowserRouter>
<Routes>
<Route path="/product/:id" element={<Product/>} />
</Routes>
</BrowserRouter>;
1
2
3
4
5
6
7
8
9
10
11
import { useParams } from "react-router-dom";

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

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

export default Product;

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



useSearchParams()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 的各種屬性,你可以得到以下資訊

1
2
3
4
5
6
7
{
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

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 技能




🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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