1.React路由介紹
現(xiàn)代的前端應(yīng)用大多都是 SPA（單頁(yè)應(yīng)用程序） page ，也就是只有一個(gè) HTML 頁(yè)面的應(yīng)用程序。因?yàn)樗挠脩趔w 驗(yàn)更好、對(duì)服務(wù)器的壓力更小，所以更受歡迎。
為了有效的使用單個(gè)頁(yè)面來(lái)管理原來(lái)多頁(yè)面的功能，前端路由 應(yīng)運(yùn)而生。
前端路由的功能：讓用戶從一個(gè)視圖（頁(yè)面）導(dǎo)航到另一個(gè)視圖（頁(yè)面）
幫助我們實(shí)現(xiàn)組件之間的動(dòng)態(tài)切換。
1.前后端的路由介紹： 2.核心組件 1.
作用：包裹整個(gè)應(yīng)用，一個(gè) React 應(yīng)用只需要使用一次
兩種常用 : 和
2.
使用 URL 的哈希值實(shí)現(xiàn)（
( 推薦 )
使用 H5 的 . API 實(shí)現(xiàn)（:3000/first）
3.Link
作用 ：用于指定導(dǎo)航鏈接，完成路由跳轉(zhuǎn)
語(yǔ)法說(shuō)明： 組件通過(guò)to屬性指定路由地址，最終會(huì)渲染為a鏈接元素
4.
作用 ：提供一個(gè)路由出口，滿足條件的路由組件會(huì)渲染到組件內(nèi)部，定義path和組件的對(duì)應(yīng)關(guān)系
5.Route
作用 ：用于指定導(dǎo)航鏈接，完成路由匹配
語(yǔ)法說(shuō)明： path屬性指定匹配的路徑地址，屬性指定要渲染的組件
說(shuō)明：當(dāng)url路徑為 ‘/about’ 時(shí)，會(huì)渲染組件
2.路由的使用步驟
1.安裝：yarn add react--dom
npm install react-router-dom@6
//新版
2.導(dǎo)入路由的三個(gè)核心組件： / / Route/Link
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
3.使用 組件包裹整個(gè)應(yīng)用（重要）
// … 省略頁(yè)面內(nèi)容
4.用包裹內(nèi)部Route頁(yè)面內(nèi)容
5.使用 Link 組件作為導(dǎo)航菜單（路由入口）（Link指定跳轉(zhuǎn)的對(duì)應(yīng)路由組件的路徑方法綁定a標(biāo)簽跳轉(zhuǎn)，to是用來(lái)配置路由地址）
頁(yè)面一
6.使用 Route 組件配置路由規(guī)則和要展示的組件（路由出口）,在子路由外面用包裹
const First = () => 頁(yè)面一的頁(yè)面內(nèi)容
// 使用Router組件包裹整個(gè)應(yīng)用
const App = () => (
React路由基礎(chǔ)
{/* 指定路由入口 */}
頁(yè)面一
//路由出口：路由地址對(duì)應(yīng)的組件會(huì)在這里進(jìn)行渲染
)
添加一個(gè)代碼，可以避免警告。
添加一個(gè) “/” 路徑的路由
驗(yàn)證：
1.:3000/ ，刪除first，顯示以下內(nèi)容。
2.點(diǎn)擊頁(yè)面一后，顯示First頁(yè)面，顯示 ’頁(yè)面一的內(nèi)容‘ 。
總結(jié)：
兩種常用的路由模式：和
聲明當(dāng)前要用是一個(gè)非hash的模式的路由
包裹整個(gè)應(yīng)用
一個(gè)React應(yīng)用只需要使用一次
，hash模式的路由
一個(gè)有#（），一個(gè)一帶#（）（推薦）
Link
指定導(dǎo)航鏈接，完成路由跳轉(zhuǎn)
to屬性指定路由地址，最終被渲染為a標(biāo)簽
提供一個(gè)路由出口，滿足條件的路由組件，會(huì)渲染到組件內(nèi)部
Route
用于指定路由組件和路由地址
path：路由組件對(duì)應(yīng)的路徑；：路由組件；成對(duì)出現(xiàn)
3.常用組件說(shuō)明 組件：包裹整個(gè)應(yīng)用，一個(gè) React 應(yīng)用只需要使用一次兩種常用 ： 和 ter：使用 URL 的哈希值實(shí)現(xiàn)（:3000/#/first）（推薦）：使用 H5 的 API 實(shí)現(xiàn)（:3000/first）4.路由的執(zhí)行過(guò)程 點(diǎn)擊 Link 組件（a標(biāo)簽），修改了瀏覽器地址欄中的 url 。React 路由監(jiān)聽(tīng)到地址欄 url 的變化。React 路由內(nèi)部遍歷所有 Route 組件，使用路由規(guī)則（ path ）與 進(jìn)行匹配。當(dāng)路由規(guī)則（path）能夠匹配地址欄中的 時(shí)，就展示該 Route 組件的內(nèi)容。
5.編程式導(dǎo)航
跳轉(zhuǎn) --- 通過(guò)js編程的方式進(jìn)行頁(yè)面路由的跳轉(zhuǎn)。
1.場(chǎng)景：點(diǎn)擊登錄按鈕，登錄成功后，通過(guò)代碼跳轉(zhuǎn)到后臺(tái)首頁(yè)，如何實(shí)現(xiàn)？
2.編程式導(dǎo)航：通過(guò) JS 代碼來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
更適合攜帶參數(shù)跳轉(zhuǎn)到另一個(gè)頁(yè)面
1.方法
使用跳轉(zhuǎn)方法綁定a標(biāo)簽跳轉(zhuǎn)，還有一種方法是this.props.，但是這種方法有的組件不一定能拿到this.props的值
3. 是 React 路由提供的，用于獲取瀏覽器歷史記錄的相關(guān)信息
4. push(path)：跳轉(zhuǎn)到某個(gè)頁(yè)面，參數(shù) path 表示要跳轉(zhuǎn)的路徑
5. go(n)： 前進(jìn)或后退到某個(gè)頁(yè)面，參數(shù) n 表示前進(jìn)或后退頁(yè)面數(shù)量（比如：-1 表示后退到上一頁(yè)）
class Login extends Component {
handleLogin = () => {
// ...
this.props.history.push('/home')
}
render() {...省略其他代碼}
}
1.案例說(shuō)明：
1.導(dǎo)入路由
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
2.用包裹整個(gè)應(yīng)用
編程式導(dǎo)航：
3.Link創(chuàng)建導(dǎo)航菜單
去登錄頁(yè)面
4.配置路由規(guī)則
5.用包裹所有的Route
6.中途檢驗(yàn)：
1.回到:3000/地址，顯示
2.點(diǎn)擊 去登錄頁(yè)面，顯示
7.給按鈕綁定點(diǎn)擊事件
handleLogin = () => {
// 使用編程式導(dǎo)航實(shí)現(xiàn)路由跳轉(zhuǎn)
// ...省略其他功能代碼
this.props.history.push('/home')
}
報(bào)錯(cuò)：
2.使用方法跳轉(zhuǎn)
執(zhí)行函數(shù)會(huì)得到一個(gè)跳轉(zhuǎn)函數(shù)。
const navigate = useNavigate()
navigate('/home');
報(bào)錯(cuò)：
為避免混淆，其他情況下不支持調(diào)用 Hooks：
不要在類組件中調(diào)用 Hooks。
不要調(diào)用事件處理程序。
不要在傳遞給 ， ， 的函數(shù)中調(diào)用 Hooks
最后，改類組件，變函數(shù)，用完成
1.語(yǔ)法說(shuō)明： 導(dǎo)入鉤子函數(shù)執(zhí)行鉤子函數(shù)得到跳轉(zhuǎn)函數(shù)執(zhí)行跳轉(zhuǎn)函數(shù)完成跳轉(zhuǎn)
import { useNavigate } from 'react-router-dom'
const Login = props => {
const navigate = useNavigate()
const handleLogin = () => {
navigate('/home')
}
return (
登錄頁(yè)面：
)
}
2.代碼實(shí)現(xiàn)：