React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫(kù)，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁(yè)面與 URL 間的同步。本文從兩個(gè)方便來(lái)解析 react-router 實(shí)現(xiàn)原理。一：介紹 react-router 的依賴庫(kù)history；二：使用 history 庫(kù)，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 react-router 路由。

成都創(chuàng)新互聯(lián)專注于韶山企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,電子商務(wù)商城網(wǎng)站建設(shè)。韶山網(wǎng)站建設(shè)公司,為韶山等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

history 介紹

history 是一個(gè) JavaScript 庫(kù)，可讓您在 JavaScript 運(yùn)行的任何地方輕松管理會(huì)話歷史記錄。history 抽象出各種環(huán)境中的差異，并提供最小的 API ，使您可以管理歷史堆棧，導(dǎo)航，確認(rèn)導(dǎo)航以及在會(huì)話之間保持狀態(tài)。

history 有三種實(shí)現(xiàn)方式：

1、BrowserHistory：用于支持 HTML5 歷史記錄 API 的現(xiàn)代 Web 瀏覽器（請(qǐng)參閱跨瀏覽器兼容性）
2、HashHistory：用于舊版Web瀏覽器
3、MemoryHistory：用作參考實(shí)現(xiàn)，也可用于非 DOM 環(huán)境，如 React Native 或測(cè)試

三種實(shí)現(xiàn)方法，都是創(chuàng)建了一個(gè) history 對(duì)象，這里主要講下前面兩種：

const history = {
 length: globalHistory.length, 
 action: "POP", 
 location: initialLocation,
 createHref,
 push, // 改變location
 replace,
 go,
 goBack,
 goForward,
 block,
 listen //監(jiān)聽(tīng)路由變化
};

1.頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)

BrowserHistory：pushState、replaceState;

HashHistory：location.hash、location.replace

function push(){
 createKey(); // 創(chuàng)建location的key，用于唯一標(biāo)示該location，是隨機(jī)生成的
 if(BrowserHistory){
 globalHistory.pushState({ key, state }, null, href);
 }else if(HashHistory){
 window.location.hash = path;
 }
 //上報(bào)listener 更新state ...
}
function replace(){
 createKey(); // 創(chuàng)建location的key，用于唯一標(biāo)示該location，是隨機(jī)生成的
 if(BrowserHistory){
 globalHistory.replaceState({ key, state }, null, href); 
 }else if(HashHistory){
 window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" path);
 } 
 //上報(bào)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=()=>{
 //上報(bào)listener
 transitionManager.notifyListeners();
 });
}

通過(guò) history 實(shí)現(xiàn)簡(jiǎn)單 react-router

import { Component } from 'react';
import createHistory from 'history/createHashHistory';
const history = createHistory(); //創(chuàng)建 history 對(duì)象
/**
 * 配置路由表
 * @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}`); //獲取路由對(duì)應(yīng)的ui
 //設(shè)置ui
 this.setState({ 
  Page: Page.default 
 });
 }

 initListener(){
 //監(jiān)聽(tīng)路由切換
 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在項(xiàng)目中已有大量實(shí)踐，其優(yōu)點(diǎn)可以總結(jié)如下:

風(fēng)格: 與React融為一體,專為react量身打造，編碼風(fēng)格與react保持一致，例如路由的配置可以通過(guò)component來(lái)實(shí)現(xiàn)

簡(jiǎn)單: 不需要手工維護(hù)路由state，使代碼變得簡(jiǎn)單

強(qiáng)大: 強(qiáng)大的路由管理機(jī)制，體現(xiàn)在如下方面

• 路由配置: 可以通過(guò)組件、配置對(duì)象來(lái)進(jìn)行路由的配置
• 路由切換: 可以通過(guò)<Link> Redirect進(jìn)行路由的切換
• 路由加載: 可以同步記載，也可以異步加載，這樣就可以實(shí)現(xiàn)按需加載

使用方式: 不僅可以在瀏覽器端的使用，而且可以在服務(wù)器端的使用

當(dāng)然react-router的缺點(diǎn)就是API不太穩(wěn)定，在升級(jí)版本的時(shí)候需要進(jìn)行代碼變動(dòng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：深入理解react-router路由的實(shí)現(xiàn)原理
網(wǎng)站鏈接：http://www.chinadenli.net/article0/iehpoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)