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 對象,這裏主要講下前面兩種:
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
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;
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
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} />;
}
}
作者:江紀雲
鏈接:https://www.jianshu.com/p/77827bfa61ef
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯繫作者獲得授權並註明出處。