此篇版本為 react-router-dom 6.3.0
react-router-dom 可以設定 react 的網站路由,是以 react-router 為基底,所以新增後會自動引入 react-router
在 【IT 鐵人賽】你React了嗎? 30天解鎖React技能 裡有做更完整的介紹,可直接看這邊
【DAY 23】React-router-dom 路由設定教學,實現頁面跳轉(上)
【DAY 24】React-router-dom 路由設定教學,實現頁面跳轉(下)
安裝 react-router-dom
路由設定
在 index.js 設定整個網站的路由
BrowserRouter
BrowserRouter 包在所有組件外層,確保整個網站可以使用 router
1 2 3 4 5 6 7 8 9 10 11 12 13
| import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App";
const root = ReactDOM.createRoot( document.getElementById("root") );
root.render( <BrowserRouter> <App /> </BrowserRouter> );
|
BrowserRouter 跟 HashRouter 的差別
HashRouter:網址會帶 #
字號,純前端使用,換 url 時不會發送request
BrowserRouter: 網址沒有 #
字號較美觀,需有後端設定,換 url 時會發送request
Routers、Router 組件
在不同的 url 渲染不同的組件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route, } from "react-router-dom"; import App from "./App"; import Page1 from "./routes/Page1"; import Page2 from "./routes/Page2";
const root = ReactDOM.createRoot( document.getElementById("root") );
root.render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="page1" element={<Page1 />} /> <Route path="page2" element={<Page2 />} /> </Routes> </BrowserRouter> );
|
path
:路徑
element
:要渲染的组件
全匹配路由
設定 Route path="*"
在所有路由的最下方,當上面的路徑都沒有匹配到時,就會顯示此組件,可用於 404 找不到頁面
1 2 3 4 5 6
| <Routes> <Route path="/foo" element={Foo}> <Route path="bar" element={Bar}></Route> <Route path="*" element={NotFound}></Route> </Route> </Routes>
|
路由跳轉
Link 組件
指定連結路徑,跳轉頁面 url
1 2 3
| import { Link } from "react-router-dom";
<Link to="index">index</Link>;
|
NavLink 組件
NavLink 跟 Link 用法相同,差別只在於 NavLink 可以判斷 to 的 url 是否為當前路徑,可用於設定 active 的樣式
1 2 3 4 5 6 7 8
| import { NavLink } from "react-router-dom";
function Foo() { return ( <NavLink style={({ isActive }) => ({ color: isActive? "red": "" })}>style</NavLink> <NavLink className={({ isActive }) => isActive ? "red" : "blue"}>className</NavLink> ); }
|
useNavigate
可直接傳入要跳轉的 url,可傳入相對路徑,-1 為回上一層
1 2 3 4 5 6 7 8 9 10 11 12
| import { useNavigate } from 'react-router-dom';
function Foo(){ const navigate= useNavigate(); return ( <div onClick={() => navigate('/b')}>跳轉到/b</div> <div onClick={() => navigate('a11')}>跳轉到/a/a1/a11</div> <div onClick={() => navigate('../a2')}>跳轉到/a/a2</div> <div onClick={() => navigate(-1)}>跳轉到/a</div> ) }
|
嵌套路由 Nested Routes
如要用 App 當作基底的 layout 有兩個步驟
設定路由在 App 的 Router 底下
加入 Outlay,Outlay 會顯示需變更切換的組件
設定路由
1 2 3 4 5 6 7 8
| <BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route path="page1" element={<Page1 />} /> <Route path="page2" element={<Page2 />} /> </Route> </Routes> </BrowserRouter>
|
並在 App.js ( layout 組件) 的地方加入 Outlet
1 2 3 4 5 6 7 8 9 10 11 12 13
| import { Outlet, Link } from "react-router-dom";
export default function App() { return ( <div> <nav> <Link to="/page1">Page1</Link> |{" "} <Link to="/page2">Page2</Link> </nav> <Outlet/> </div> ); }
|
默認路由 index Routes
如為嵌套路由時,可設定預設要顯示的組件,當 url 為 ‘/about’ 時,Outlet 會顯示 Default 組件
1 2 3 4 5 6
| <Routes> <Route path="/about" element={About}> <Route index element={Default}></Route> <Route path="contact" element={Contact}></Route> </Route> </Routes>
|
Params參數
useParams()
當 router 是動態路由時,useParams 可以取得 url 的 params
1 2 3 4 5
| <BrowserRouter> <Routes> <Route path="/product/:id" element={<Product/>} /> </Routes> </BrowserRouter>;
|
1 2 3 4 5 6 7 8 9
| import { useParams } from "react-router-dom"; export default function Foo() { const params= useParams(); return ( <div> <h1>{params.id}</h1> </div> ); }
|
useSearchParams()
可查找或設定 Query String 問號後面的 params,用法跟 useState()
一樣
如當前路徑為 /product?id=12
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| import { useSearchParams } from "react-router-dom";
function Product() { const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get("id")); console.log(searchParams.getAll("id"));
setSearchParams({ name: "foo", });
return <div>foo</div>; }
|
當前路由資訊
useLocation
獲取當前 url 的各種屬性,
1 2 3
| import { useLocation } from "react-router-dom"; let location = useLocation(); console.log(location);
|
你可以得到以下資訊
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,可以實現數據緩存
Hey!想學習更多前端知識嗎?
最近 Lala 開了前端課程 👉
【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手,又或是想學 RWD 的初學者,
我們將帶你從零開始,深入了解並掌握 RWD 響應式網頁設計的核心技術,快來一起看看吧 😊
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。