此篇版本為 react-router-dom v6
react-router-dom 可以設定 react 的網站路由,是以 react-router
為基底,
所以新增後會自動引入 react-router
本篇分為幾個大類
- 路由設定
- 路由跳轉
- 嵌套路由 Nested Routes
在開始之前請先安裝 react-router-dom
安裝 react-router-dom
1 | // npm |
依自己喜好去安裝使用 npm
或 yarn
1. 路由設定
BrowserRouter
App.js
1 | import { BrowserRouter } from "react-router-dom"; |
BrowserRouter 包在所有組件外層,確保整個網站可以使用 router
你可以依需求選擇要用 BrowserRouter 或 HashRouter
BrowserRouter
: 網址沒有#
字號較美觀,有後端設定,換 url 時會發送 requestHashRouter
:網址會帶#
字號,純前端使用,換 url 時不會發送 request
BrowserRouter 可傳入屬性
- basename: string設定網頁根目錄,上例渲染後會呈現
1
2
3
4<BrowserRouter basename="/lala">
<Link to="/about"/>
<Link to="/contact"/>
</BrowserRouter>1
2<a href="/lala/about">
<a href="/lala/contact">
forceRefresh: boolean
1
<BrowserRouter forceRefresh={true} />
如為 true 強制刷新頁面
keyLength: number
1
<BrowserRouter keyLength={12} />
location key 的長度,預設為 6
Routes、Route 組件
App.js
1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; |
Routes 要包在 Route 的外層,在不同的 url 渲染不同的組件
path
:路徑element
:要渲染的组件
全匹配路由
1 | <Routes> |
設定 Route path="*"
在所有路由的最下方,當上面的路徑都沒有匹配到時,就會顯示此組件,可用於 404 找不到頁面
2. 路由跳轉
在跳轉路由時,如果路徑是/
開頭的是絕對路由,否則為相對路由,即相對於當前 URL 進行改變
Link 組件
1 | import { Link } from "react-router-dom"; |
指定連結路徑,跳轉頁面 url
NavLink 組件
1 | import { NavLink } from "react-router-dom"; |
NavLink 跟 Link 用法相同,差別只在於 NavLink 可以判斷 to
的 url 是否為當前路徑,可用於設定 active
的樣式
useNavigate
1 | import { useNavigate } from 'react-router-dom'; |
可直接傳入要跳轉的 url,可傳入相對路徑,-1
為回上一層
3. 嵌套路由 Nested Routes
嵌套路由使用方法
- 設定路由在「嵌套組件」的 Route 底下
- 嵌套組件加入 Outlet 顯示頁面內容
3-1. 設定路由在「嵌套組件」的 Route 底下
1 | <BrowserRouter> |
上例嵌套組件為 Layout,被 Layout 包住的 Route 都會被嵌套,
默認路由為 index
,當 url 為 “/”
時,會顯示 Home 組件
3-2. 嵌套組件加入 Outlet 顯示頁面內容
Layout.js
1 | import { Outlet } from "react-router-dom"; |
將嵌套組件加入 Outlet,Outlet 的地方會顯示被嵌套頁面的內容
結語
由於怕篇幅過長,路由設定教學分為上下兩篇介紹,
明天會繼續示範動態路由與取得當前路由資訊等介紹,
今天就先到這邊囉~我們明天繼續吧!!
本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。