深入理解react-router 路由的實現原理
React Router 是一個基於 React 之上的強大路由庫，它可以讓你嚮應用中快速地新增檢視和資料流，同時保持頁面與 URL 間的同步。本文從兩個方便來解析 react-router 實現原理。一：介紹 react-router 的依賴庫history；二：使用 history 庫，實現一個簡單的 react-router 路由。
history 介紹
前端精品教程：百度網盤下載
history 是一個 JavaScript 庫，可讓您在 JavaScript 執行的任何地方輕鬆管理會話歷史記錄。history 抽象出各種環境中的差異，並提供最小的 API ，使您可以管理歷史堆疊，導航，確認導航以及在會話之間保持狀態。
history 有三種實現方式：
1、BrowserHistory：用於支援 HTML5 歷史記錄 API 的現代 Web 瀏覽器（請參閱跨瀏覽器相容性）
2、HashHistory：用於舊版Web瀏覽器
3、MemoryHistory：用作參考實現，也可用於非 DOM 環境，如 React Native 或測試
三種實現方法，都是建立了一個 history 物件，這裡主要講下前面兩種：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
const history = {
length: globalHistory.length,
action:
"POP"
,
location: initialLocation,
createHref,
push,
// 改變location
replace,
go,
goBack,
goForward,
block,
listen
//監聽路由變化
};
|
1.頁面跳轉實現
前端精品教程：百度網盤下載
BrowserHistory：pushState、replaceState;
HashHistory：location.hash、location.replace
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function
push(){
createKey();
// 建立location的key，用於唯一標示該location，是隨機生成的
if
(BrowserHistory){
globalHistory.pushState({ key, state },
null
, href);
}
else
if
(HashHistory){
window.location.hash = path;
}
//上報listener 更新state ...
}
function
replace(){
createKey();
// 建立location的key，用於唯一標示該location，是隨機生成的
if
(BrowserHistory){
globalHistory.replaceState({ key, state },
null
, href);
}
else
if
(HashHistory){
window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) +
"#"
path);
}
//上報listener 更新state ...
}
|
2.瀏覽器回退
BrowserHistory：popstate;
HashHistory：hashchang;
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
if
(BrowserHistory){
window.addEventListener(
"popstate"
, routerChange);
}
else
if
(HashHistory){
window.addEventListener(
"hashchange"
, routerChange);
}
function
routerChange(){
const location = getDOMLocation();
//獲取location
//路由切換
transitionManager.confirmTransitionTo(location,callback=()=>{
//上報listener
transitionManager.notifyListeners();
});
}
|
通過 history 實現簡單 react-router
前端精品教程：百度網盤下載
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Component } from
'react'
;
import createHistory from
'history/createHashHistory'
;
const history = createHistory();
//建立 history 物件
/**
* 配置路由表
* @type {{"/": string}}
*/
const router = {
'/'
:
'page/home/index'
,
'/my'
:
'page/my/index'
}
export
default
class Router extends Component {
state = { page:
null
}
async route(location) {
let pathname = location.pathname;
let pagePath = router[pathname];
// 加 ./的原因 https://webpack.docschina.org/api/module-methods#import-
const Page = await import(`./${pagePath}`);
//獲取路由對應的ui
//設定ui
this
.setState({
Page: Page.
default
});
}
initListener(){
//監聽路由切換
history.listen((location, action) => {
//切換路由後，更新ui
this
.route(location);
});
}
componentDidMount() {
this
.route(history.location);
this
.initListener();
}
render() {
const { Page } =
this
.state;
return
Page && <Page {...
this
.props} />;
}
}
|
目前react-router在專案中已有大量實踐，其優點可以總結如下:
風格: 與React融為一體,專為react量身打造，編碼風格與react保持一致，例如路由的配置可以通過component來實現
簡單: 不需要手工維護路由state，使程式碼變得簡單
強大: 強大的路由管理機制，體現在如下方面
- 路由配置: 可以通過元件、配置物件來進行路由的配置
- 路由切換: 可以通過<Link> Redirect進行路由的切換
- 路由載入: 可以同步記載，也可以非同步載入，這樣就可以實現按需載入
使用方式: 不僅可以在瀏覽器端的使用，而且可以在伺服器端的使用
當然react-router的缺點就是API不太穩定，在升級版本的時候需要進行程式碼變動。