該圖來自React 官方中文檔案 – 用于構建用戶界面的 JavaScript 庫官方logo
react路由介紹：React Router: Declarative Routing for React.js
路由安裝：
安裝命令：npm i react-router-dom@5.0 -S
npm i react-router-dom@5.0 -S路由組件相關：
BrowserRouter 瀏覽器路由
HashRouter 哈希路由
NavLink 導航鏈接
exact精確匹配 to 鏈接地址 class="active" 匹配狀態
Route 路由容器
exact精確匹配
（路徑和配置的path完全匹配） path 路由地址 component 組件
<Redirect> 重定向
to 去哪兒 from 從那
<Switch> 匹配一個路由
<Prompt>
路由離開呼叫彈框
when 當條件為真 message 彈出文本內容
<Link>跳轉
to=“/login”
to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}
引數 props里面的location一致的
404頁面
1. Switch 包裹（一次匹配一個）2. path=“*” 3. 配置放在最后面
路由的引數
path="produce/:id” 切換 to=“/produce/abc” 獲取：props.match.params.id
子路由
在主路由添加
<div>
<Route path="/admin/dash" component={Dash}></Route>
<Route path="/admin/orderlist" component={OrderList}></Route>
{/* 重定向 */}
<Redirect path="/admin" to="/admin/dash"></Redirect>
</div>
路由props相關：
1. match匹配的路由
params
路由的引數
isExact
是否精確匹配
path路徑
url 地址
2.history歷史記錄
push 跳轉 replace 替換歷史記錄 go跳轉歷史記錄 goBack 回傳 goForward 前進 linsten 監聽
location 同 location length 長度
3.location地址欄資訊
hash哈希值 pathname地址名稱 search 查詢資訊 state跳轉傳入資料
只有 Route 對應的component才有這三個自動注入引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404162.html
標籤：其他
上一篇：關于前端開發中常用組件封裝的一些思考、技巧分享，基本上所有的專案都適用
下一篇：Vue滑鼠移入移出更改圖片。