一、React路由: 實(shí)現(xiàn)單頁應(yīng)用的核心技術(shù)(單頁應(yīng)用 簡稱SPA)
路由實(shí)現(xiàn)原理:通過H5 history API和url hash
路由原理參考資料:
https://segmentfault.com/a/1190000007238999
https://segmentfault.com/a/1190000011967786
二、React路由實(shí)現(xiàn)有兩個(gè)包:
1.react-router
2.react-router-dom
官網(wǎng):https://reacttraining.com/react-router/
官方github:https://github.com/ReactTraining/react-router
中文路由文檔:http://reacttraining.cn/web/example/basic
三纯出、React-router-dom具體使用
Route:視圖展示 區(qū) 相當(dāng)于vue中的router-view
Link:要跳轉(zhuǎn)的指令 相當(dāng)于vue中的router-link
步驟:
1.安裝react-router-dom
2.創(chuàng)建路由文件
3.引入到入口文件:index.js
其中:路由文件中的具體配置
1.引入所需的包:
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Switch,
NavLink
} from 'react-router-dom';
2.用Link指令指令要跳轉(zhuǎn)的路徑
例如:
<Link to="/">首頁</Link>
3.指定在哪個(gè)區(qū)域顯示視圖
例如:
<Route exact path="/" component={Home} />
注意:exact 表示是精確匹配松靡,必須要加
4.如何指定高亮
可以通過NavLink指令指定坛增,專為導(dǎo)航服務(wù)的
例如:
<NavLink exact to="/">首頁</NavLink>
可以通過activeClassName指定高亮類的樣式,如果不指定activeClassName届案,可以直接使用active類名即可
5.路由傳參
<Route path={`${match.url}/:要接收的參數(shù)名`} component={Topic}/>
JSX接收參數(shù):match.params.參數(shù)名
Reacr UI庫 antd: 阿里
文檔https://ant.design/docs/react/introduce-cn
redux: react中的狀態(tài)管理工具 相當(dāng)于vue中的vuex