目錄
一、路由環(huán)境配置
1.搭建一個(gè)項(xiàng)目名為boke（自定義），編輯文檔語(yǔ)言為TypeScript的項(xiàng)目環(huán)境。
2.安裝所有package.json中的依賴----安裝包(注意要【cd 項(xiàng)目名】進(jìn)入項(xiàng)目文件安裝)
3.添加React-Router路由
4.文件、目錄相關(guān)修改與搭建
二、路由的懶加載
?三、路由跳轉(zhuǎn)
1.標(biāo)簽跳轉(zhuǎn)（聲明式跳轉(zhuǎn)）---a標(biāo)簽、Link標(biāo)簽?
2.編程式跳轉(zhuǎn)?---useNavigate
?四、路由傳參
1. url傳參 ————直接使用navigate
2.state傳參 (常用)
3.params傳參
五、配置符" * "
六、路由嵌套
1.方法一
(1).在父路由后面增加" / * ",表示可以有子組件
(2).配置子路由選項(xiàng)
(3).將子路由文件導(dǎo)入父路由文件中
?2.方法二
3.注意事項(xiàng)
七、路由重定向
1.方法一
2.方法二
3.方法三
八、路由鑒權(quán)
方法一：組件傳參
方法二：插槽
一、路由環(huán)境配置
1.搭建一個(gè)項(xiàng)目名為boke（自定義），編輯文檔語(yǔ)言為TypeScript的項(xiàng)目環(huán)境。
create-react-App boke --template typescript2.安裝所有package.json中的依賴----安裝包(注意要【cd 項(xiàng)目名】進(jìn)入項(xiàng)目文件安裝)
npm i3.添加React-Router路由
(a)ts開(kāi)發(fā)情況下， 下載模塊"react-router-dom"和 "@types/react-router-dom"
npm i --save react-router-dom @types/react-router-dom
(b)js開(kāi)發(fā)情況下, 只需下載模塊"react-router-dom" 擴(kuò)展：
- --save -dev：某些腳手架只在開(kāi)發(fā)階段起作用，項(xiàng)目打包的時(shí)候不會(huì)被打包，表示下載的這個(gè)包非項(xiàng)目依賴，縮寫(xiě)-D
- --save則表示開(kāi)發(fā)階段需要，項(xiàng)目打包也被打包。（npm版本5.6以上，默認(rèn)下載--save）縮寫(xiě)-S
注意本篇文章的編寫(xiě)按照一下版本號(hào)進(jìn)行的
4.文件、目錄相關(guān)修改與搭建
????????將src文件目錄下只留下文件App.tsx和index.tsx,自己設(shè)計(jì)建立路由文件夾router，網(wǎng)站頁(yè)面文件夾views，新建文件home(首頁(yè))，user(個(gè)人中心頁(yè))，error（不輸入網(wǎng)址錯(cuò)誤時(shí)進(jìn)入的頁(yè)面）。
App.tsx:
index.tsx:
?配置路由文件(以下只寫(xiě)了一級(jí)路由)
?其中"?/ "表示端口號(hào)后面什么都沒(méi)有輸入或者只輸入了" / "
其中?"?/ * "表示沒(méi)有能匹配上的進(jìn)入的頁(yè)面
二、路由的懶加載
????????我們?nèi)绻裆厦孢@么寫(xiě)全部頁(yè)面都用import引入，項(xiàng)目打包的時(shí)候就會(huì)將這些網(wǎng)頁(yè)代碼全部都打包，極大浪費(fèi)內(nèi)存資源。我們可以使用路由的懶加載（用戶輸入該網(wǎng)址才會(huì)打包該文件)————>React,lazy()
????????這里介紹幾個(gè)標(biāo)簽<Suspense>占位組件，當(dāng)懶加載組件還沒(méi)有加載出來(lái)的時(shí)候，先用占位組件顯示。里面有一個(gè)屬性fallback，里面?zhèn)鬟M(jìn)去的組件就是占位組件。有<Suspense>表示該組件懶加載出來(lái)的，決定是否懶加載出來(lái)的看是不是React.lazy().
?三、路由跳轉(zhuǎn)
????????路由跳轉(zhuǎn)有標(biāo)簽跳轉(zhuǎn)-聲明式跳轉(zhuǎn)，用ts、js程序?qū)崿F(xiàn)跳轉(zhuǎn)的是編程式跳轉(zhuǎn)
1.標(biāo)簽跳轉(zhuǎn)（聲明式跳轉(zhuǎn)）---a標(biāo)簽、Link標(biāo)簽?
跳轉(zhuǎn)路徑： “/user”是以斜杠開(kāi)頭，表示相對(duì)根路徑，當(dāng)前網(wǎng)址的根是3000端口，直接在3000端口后面寫(xiě)“/user”。
提問(wèn)：a標(biāo)簽跳轉(zhuǎn)和Link跳轉(zhuǎn)有什么區(qū)別?
a標(biāo)簽作為一種網(wǎng)絡(luò)連接，會(huì)重新請(qǐng)求網(wǎng)頁(yè)，導(dǎo)致頁(yè)面刷新，而Link標(biāo)簽只是用DOM操作將頁(yè)面中的標(biāo)簽切換，通過(guò)網(wǎng)址來(lái)切換組件。
2.編程式跳轉(zhuǎn)?---useNavigate
useNavigate（路由框架自定義hook，非React官方提供）
?四、路由傳參
????????在說(shuō)路由傳參之前，先了解如何獲取到當(dāng)前路由信息
//導(dǎo)入
import {useNavigate, useLocation, useParams } from 'react-router-dom'
let navigate = useNavigate()
// /* 手寫(xiě)實(shí)現(xiàn)獲取到url中？后的參數(shù)信息 */
let localtion = useLocation()
let params = useParams()
console.log(localtion, params, "--------------");
// //localtion路由信息對(duì)象
// //params針對(duì)于state傳參localtion對(duì)象
????????
????????路由傳參在我們項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)遇到，比如商品點(diǎn)進(jìn)詳情頁(yè)，而不同商品的詳情頁(yè)-不同在于內(nèi)容不一樣，我們?cè)诎l(fā)送網(wǎng)絡(luò)請(qǐng)求獲取到所點(diǎn)擊商品的詳情時(shí)，我們路由跳轉(zhuǎn)的時(shí)候傳參，再將參數(shù)發(fā)送給后端，后端判斷返回?cái)?shù)據(jù)給前端。??????
????????那么路由如何傳參呢？我們模擬點(diǎn)擊商品進(jìn)入詳情頁(yè)，使用假數(shù)據(jù)
1. url傳參 ————直接使用navigate
?跳轉(zhuǎn)時(shí)，參數(shù)在url中，目標(biāo)參數(shù)需要手動(dòng)解析
??在這里再擴(kuò)充一個(gè)小知識(shí)點(diǎn)，手寫(xiě)函數(shù)解析url的querystring，以下可以獲取到url中”？"后的參數(shù)
/* 手寫(xiě)實(shí)現(xiàn)獲取到url中？后的參數(shù)信息 */
let localtion = useLocation()
let params = useParams()
console.log(localtion, params, "--------------");
//localtion路由信息對(duì)象
//params針對(duì)于動(dòng)態(tài)路由傳參--params傳參
let queryobj:any={}
localtion.search.split("?")[1].split("&").forEach(el=>{
var arr=el.split("=")
queryobj[arr[0]]=arr[1]
})
console.log(queryobj);2.state傳參 (常用)
state傳參優(yōu)點(diǎn)：state傳入?yún)?shù)，用戶通過(guò)點(diǎn)擊商品進(jìn)入詳情頁(yè)（兩個(gè)頁(yè)面有直接聯(lián)系），會(huì)將state的數(shù)據(jù)存到緩存中，并不是像url傳參拼接到url后面（注意此時(shí)是同一個(gè)瀏覽器頁(yè)面實(shí)現(xiàn)的路由跳轉(zhuǎn)，此緩存類似于sessionStorage，緩存數(shù)據(jù)不在不同的瀏覽器頁(yè)面中共享），當(dāng)這時(shí)候有其他人用此鏈接直接搜索時(shí)，不存在state參數(shù)數(shù)據(jù)。
?state傳參獲取到參數(shù)數(shù)據(jù)，直接取值 location.state
3.params傳參
/* 第三種 params傳參(動(dòng)態(tài)路由傳參) */
navigate("/user/0315")????????其中這第一個(gè)數(shù)據(jù)user表示路由，第二個(gè)數(shù)據(jù)0315表示參數(shù)，params傳參也叫動(dòng)態(tài)路由傳參，參數(shù)放在網(wǎng)址中。放在passname中。
需要滿足三個(gè)地方條件
（1）注冊(cè)————":"冒號(hào)后面表示變量，該變量保存參數(shù)
（2）跳轉(zhuǎn)——跳轉(zhuǎn)格式跟注冊(cè)格式對(duì)應(yīng)
（3）接收需要params接收
五、配置符" * "
<Route path="/*" element={<組件/>}></Route>
" * "表示其他路由沒(méi)有被匹配到，就會(huì)匹配”配置符“后的組件。（注意已經(jīng)更改了，以前此符號(hào)表示寫(xiě)在此符號(hào)前面的路由沒(méi)有被匹配到，就匹配此符號(hào)的組件，后面的路由不會(huì)接著被匹配。所以以前需要將"*"路由寫(xiě)在最后，而現(xiàn)在沒(méi)有影響，放在哪都行）
六、路由嵌套
1.方法一
(1).在父路由后面增加" / * ",表示可以有子組件
(2).配置子路由選項(xiàng)
(3).將子路由文件導(dǎo)入父路由文件中
?2.方法二
????????除了單獨(dú)一個(gè)文件配置子路由之外，我們還可以直接在父路由組件文件中配置子路由，這樣的好處就是方便管理。同樣的父路由需要加上“/*”。
3.注意事項(xiàng)
- 父路由后面必須加“/*”，因?yàn)槟阒挥羞M(jìn)入了父路由——父路由組件代碼，你才有機(jī)會(huì)加載父路由文件中的子路由代碼。
- 只有在根路由中才會(huì)啟用路由模式<Router>__BrowserRouter,整個(gè)網(wǎng)站只有一個(gè)。
七、路由重定向
1.方法一
2.方法二
3.方法三
八、路由鑒權(quán)
????????利用路由重定向，可以增加判斷條件實(shí)現(xiàn)路由鑒權(quán)，例如我們登錄后會(huì)在瀏覽器緩存中緩存token，我們也通過(guò)瀏覽器緩存中是否含有token來(lái)判斷當(dāng)前是否有用戶登錄，在某些頁(yè)面，如果沒(méi)有登錄則需要?jiǎng)t需要跳到登錄頁(yè)面進(jìn)行登錄操作，
封裝函數(shù)組件用來(lái)路由鑒權(quán)
方法一：組件傳參
方法二：插槽
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-680430.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-680430.html
到了這里，關(guān)于＜React-Router＞超全react路由知識(shí)點(diǎn)(跳轉(zhuǎn)、傳參、子路由、重定向等）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
