延續上一篇 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")); console.log(searchParams.getAll("id"));
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,可以實現數據緩存
當在一個頁面將卷軸往下滾動,切換頁面後,會發現卷軸的位置還是在上個頁面切換的位置
就會像範例這樣
因為 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 技能
🚀實體工作坊分享
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。