安裝
npm i react-router-dom -S
導(dǎo)入路由需要的組件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
【常用路由組件如下：】
BrowserRouter as Router
瀏覽器路由 別名為Router
Link導(dǎo)航 to切換的頁(yè)面
Route路由頁(yè)面--path對(duì)應(yīng)鏈接component對(duì)應(yīng)組件
BrowserLink
帶active激活的class路由連接
子路由
步驟01：導(dǎo)入NavLink
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'
步驟02：定義指令NavLink
<NavLink to="/detail">詳情</NavLink>
步驟03：定義主路由
<Route path="/detail" component={Detail}></Route>
步驟04：編寫(xiě)主路由
child組件
image.png
life生命周期
image.png
Todolist
image.png
導(dǎo)出 child Todo
image.png
}
路由組件的參數(shù)
history
goBack() 返回
goForward() 前進(jìn)
push('/') 切換跳轉(zhuǎn)
replace 跳轉(zhuǎn)不留歷史記錄
location 地址欄信息
pathname路徑
match
params路由參數(shù)
url 配置的地址
