Dieser Artikel bietet Ihnen ein umfassendes Verständnis des React-Router 4.0-Quellcodes, beginnend mit dem Routing. Ich hoffe, dass er für Freunde hilfreich ist.
Das Prinzip des Front-End-Routings wie React-Router ist ungefähr das gleiche und kann ohne Aktualisierung zur Anzeige verschiedener Seiten wechseln. Der Kern des Routings besteht darin, dass sich bei einer Änderung der URL der Seite das Anzeigeergebnis der Seite entsprechend der Änderung der URL ändern kann, die Seite jedoch nicht aktualisiert wird. Single-Page-Anwendungen (SPA) können durch Front-End-Routing implementiert werden. Dieser Artikel beginnt zunächst mit dem Prinzip des Front-End-Routings und stellt die Änderungen im Prinzip des Front-End-Routings im Detail vor. Ausgehend vom Quellcode von React-Router4.0 werden wir dann ein tiefes Verständnis dafür haben, wie React-Router4.0 das Front-End-Routing implementiert.
Front-End-Routing durch Hash
Front-End-Routing durch den H5-Verlauf
Reagieren - Verwendung von Router4.0
React-router4.0-Quellcode-Analyse
Frühes Front-End-Routing wurde durch Hash implementiert:
Eine Änderung des Hash-Werts der URL führt nicht zu einer Aktualisierung der Seite.
Daher kann das Front-End-Routing über Hash implementiert werden, wodurch ein aktualisierungsfreier Effekt erzielt wird. Das Hash-Attribut befindet sich im Standortobjekt. Auf der aktuellen Seite können Sie den Hash-Wert der aktuellen URL ändern über:
window.location.hash='edit'
. Nach der Ausführung der oben genannten Hash-Zuweisung ändert sich die URL der Seite.
Vor der Zuweisung: http://localhost:3000
Nach der Zuweisung: http://localhost:3000/#edit
In der URL gibt es einen zusätzlichen Hashwert, der mit # endet Obwohl sich der Hashwert der Seite vor und nach der Zuweisung ändert, wodurch sich die vollständige URL der Seite ändert, wird die Seite nicht aktualisiert. Darüber hinaus gibt es ein Ereignis namens hashchange, das Hash-Änderungen überwachen kann. Wir können Hash-Änderungen auf die folgenden zwei Arten überwachen:
window.onhashchange=function(event){
console.log(event);
}
window.addEventListener('hashchange',function(event){
console.log(event);
})Wenn sich der Hash-Wert ändert, wird ein HashChangeEvent ausgegeben. Der spezifische Wert des HashChangeEvent ist:
{isTrusted: true, oldURL: "http://localhost:3000/", newURL: "http://localhost:3000/#teg", type: "hashchange".....}Mit dem Listening-Ereignis und der nicht aktualisierten geänderten Hash-Seite können wir unsere Funktion zum Anzeigen und Ausblenden verschiedener UI-Anzeigen in der Rückruffunktion des Listening-Ereignisses ausführen. Implementieren Sie daher das Front-End-Routing.
Zusätzlich zur Änderung des Hashwerts der aktuellen Seite über window.location.hash kann dies auch über das a-Tag von HTML erreicht werden:
<a href="#edit">edit</a>
Hash ist gut kompatibel und wurde daher im frühen Front-End-Routing häufig verwendet. Es gibt jedoch auch viele Mängel bei der Verwendung von Hash.
Suchmaschinen sind nicht freundlich zu Seiten mit Hashes
Es ist schwierig, das Benutzerverhalten auf Seiten mit Hashes zu verfolgen
Die Verlaufsschnittstelle von HTML5 ist eine Schnittstelle auf unterster Ebene und erbt von keiner Schnittstelle. Die History-Schnittstelle ermöglicht es uns, den Browser-Sitzungsverlauf zu manipulieren.
Der Verlauf stellt einige Eigenschaften und Methoden bereit.
Verlaufsattribute:
History.length: Gibt zurück, wie viele Datensätze es im Sitzungsverlauf gibt, einschließlich der aktuellen Sitzungsseite. Wenn außerdem ein neuer Tab geöffnet wird, beträgt der Längenwert 1
History.state:
Wenn gespeichert, wird das Ereignis popState gespeichert ausgelöst werden. Methode, das übergebene Attributobjekt (wird später in den Methoden pushState und replaceState ausführlich vorgestellt)
History-Methode:
History.back(): Zurück zum Durchsuchen Die vorherige Seite im Browser-Sitzungsverlauf hat die gleiche Funktion wie die Zurück-Schaltfläche des Browsers
History.forward(): Zeigt auf die nächste Seite im Browser-Sitzungsverlauf, die identisch mit dem Browser. Die Vorwärtsschaltfläche ist identisch mit
History.go(): Sie können zu einer bestimmten Datensatzseite im Browser-Sitzungsverlauf springen
History.pushState(): pushState kann die angegebenen Daten in den Browser-Sitzungsverlaufsstapel verschieben. Diese Methode empfängt 3 Parameter, Objekt, Titel und eine Zeichenfolge von URLs. Nach pushState wird die aktuelle Seiten-URL geändert, es erfolgt jedoch keine Aktualisierung.
History.replaceState(): replaceState ersetzt die URL der aktuellen Sitzungsseite durch die Die angegebenen Daten werden auch nach dem Ersetzen des Status aktualisiert. Die URL der aktuellen Seite wird jedoch nicht aktualisiert.
In der obigen Methode haben pushState und repalce den gleichen Punkt:
Sie ändern beide die auf der aktuellen Seite angezeigte URL, aber Sie werden die Seite nicht aktualisieren.
Unterschied:
pushState wird in den Sitzungsverlaufsstapel des Browsers verschoben, wodurch History.length um 1 erhöht wird, während replaceState das ersetzt aktueller Sitzungsverlauf, also History.length.
Verlauf im BOM-Objektmodell des Browsers Wichtige Attribute, der Verlauf erbt vollständig die Verlaufsschnittstelle, Es verfügt also über alle Eigenschaften und Methoden im Verlauf.
Hier betrachten wir hauptsächlich die Eigenschaft „history.length“ und die Methoden „history.pushState“ und „history.replaceState“.
history.pushState(stateObj,title,url) oder History.replaceState(stateObj,title,url)
pushState und replaceState akzeptieren 3 Parameter, nämlich Statusobjekt, Titeltitel und geänderte URL.
window.history.pushState({foo:'bar'}, "page 2", "bar.html");
此时，当前的url变为：
执行上述方法前：http://localhost:3000
执行上述方法后：http://localhost:3000/bar.html
如果我们输出window.history.state:
console.log(window.history.state);
// {foo:'bar'}
window.history.state就是我们pushState的第一个对象参数。
history.replaceState()方法不会改变hitroy的长度
console.log(window.history.length);
window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
console.log(window.history.length);
上述前后两次输出的window.history.length是相等的。
此外。
每次触发history.back()或者浏览器的后退按钮等，会触发一个popstate事件，这个事件在后退或者前进的时候发生：
window.onpopstate=function(event){
}注意：
history.pushState和history.replaceState方法并不会触发popstate事件。
如果用history做为路由的基础，那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址，且如果页面发生回退back或者forward时，会触发popstate事件。
hisory为依据来实现路由的优点：
对搜索引擎友好
方便统计用户行为
缺点：
兼容性不如hash
需要后端做相应的配置，否则直接访问子页面会出现404错误
了解了前端路由实现的原理之后，下面来介绍一下React-router4.0。在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：
react-router : react-router4.0的核心代码
react-router-dom : 构建网页应用，存在DOM对象场景下的核心包
react-router-native : 适用于构建react-native应用
react-router-config : 配置静态路由
react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。
在react-router4.0中，遵循Just Component的设计理念：
所提供的API都是以组件的形式给出。
比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。
下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。
用
basename: string 这个属性，是为当前的url再增加名为basename的值的子目录。
<BrowserRouter basename="test"/>
如果设置了basename属性，那么此时的：
http://localhost:3000 和 http://localhost:3000/test 表示的是同一个地址，渲染的内容相同。
getUserConfirmation: func 这个属性，用于确认导航的功能。默认使用window.confirm
forceRefresh: bool 默认为false，表示改变路由的时候页面不会重新刷新，如果当前浏览器不支持history，那么当forceRefresh设置为true的时候，此时每次去改变url都会重新刷新整个页面。
keyLength: number 表示location的key属性的长度，在react-router中每个url下都有为一个location与其对应，并且每一个url的location的key值都不相同，这个属性一般都使用默认值，设置的意义不大。
children: node children的属性必须是一个ReactNode节点，表示唯一渲染一个元素。
与
首先来看如何执行匹配，决定
path：当location中的url改变后，会与Route中的path属性做匹配，path决定了与路由或者url相关的渲染效果。
exact: 如果有exact，只有url地址完全与path相同，才会匹配。如果没有exact属性，url的地址不完全相同，也会匹配。
举例来说，当exact不设置时：
<Route path='/home' component={Home}/>
<Route path='/home/first' component={First}/>此时url地址为：http://localhost:3000/home/first 的时候，不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。
如果设置了exact：
<Route path='/home' component={Home}/>只有http://localhost:3000/home/first 不会匹配Home组件，只有url地址完全与path相同，只有http://localhost:3000/home才能匹配Home组件成功。
strict ：与exact不同，strict属性仅仅是对exact属性的一个补充，设置了strict属性后，严格限制了但斜线“／”。
举例来说,当不设置strict的时候：
<Route path='/home/' component={Home}/>此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性：
<Route path='/home/' component={Home}/>那么此时严格匹配斜线是否存在，http://localhost:3000/home 将无法匹配到Home组件。
当Route组件与某一url匹配成功后，就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢，Route的component、render、children决定渲染的内容。
component：该属性接受一个React组件，当url匹配成功，就会渲染该组件
render：func 该属性接受一个返回React Element的函数，当url匹配成功，渲染覆该返回的元素
children：与render相似，接受一个返回React Element的函数，但是不同点是，无论url与当前的Route的path匹配与否，children的内容始终会被渲染出来。
并且这3个属性所接受的方法或者组件，都会有location，match和history这3个参数。如果组件，那么组件的props中会存在从Link传递过来的location，match以及history。
to: string
to属性的值可以为一个字符串，跟html中的a标签的href一样，即使to属性的值是一个字符串，点击Link标签跳转从而匹配相应path的Route，也会将history，location，match这3个对象传递给Route所对应的组件的props中。
举例来说：
<Link to='/home'>Home</Link>
如上所示，当to接受一个string，跳转到url为'/home'所匹配的Route，并渲染其关联的组件内接受3个对象history，location，match。
这3个对象会在下一小节会详细介绍。
to: object
to属性的值也可以是一个对象，该对象可以包含一下几个属性：pathname、seacth、hash和state，其中前3个参数与如何改变url有关，最后一个state参数是给相应的改变url时，传递一个对象参数。
举例来说：
<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>在上个例子中，to为一个对象，点击Link标签跳转后，改变后的url为：'/home?sort=name#edit'。 但是在与相应的Route匹配时，只匹配path为'/home'的组件，'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准，仅仅是做为参数传递到所匹配到的组件中，此外，state={a:1}也同样做为参数传递到新渲染的组件中。
介绍了
我们前面提到，Route匹配到相应的改变后的url，会渲染新组件，该新组件中的props中有history、location、match3个对象属性，其中hisotry对象属性最为关键。
同样以下面的例子来说明：
<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>
<Route exact path='/home' component={Home}/>我们使用了
// props中的history
action: "PUSH"
block: ƒ block()
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 12
listen: ƒ listen(listener)
location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)从上面的属性明细中：
push:f 这个方法用于在js中改变url，之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。
replace: f 这个方法也是用于在js中改变url，replace方法映射于window.history中的replaceState方法。
block：f 这个方法也很有用，比如当用户离开当前页面的时候，给用户一个文字提示，就可以采用history.block("你确定要离开当前页吗？")这样的提示。
go / goBack / goForward
在组件props中history的go、goBack、goForward方法，分别window.history.go、window.history.back、window.history.forward对应。
action: "PUSH" || "POP"
action这个属性左右很大，如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url，那么在新组件中的action就是"PUSH",否则就是"POP".
action属性很有用，比如我们在做翻页动画的时候，前进的动画是SlideIn，后退的动画是SlideOut，我们可以根据组件中的action来判断采用何种动画：
function newComponent (props)=>{
return (
<ReactCSSTransitionGroup
transitionAppear={true}
transitionAppearTimeout={600}
transitionEnterTimeout={600}
transitionLeaveTimeout={200}
transitionName={props.history.action==='PUSH'?'SlideIn':'SlideOut'}
>
<Component {...props}/>
</ReactCSSTransitionGroup>
)
}location:object
在新组件的location属性中，就记录了从就组件中传递过来的参数，从上面的例子中，我们看到此时的location的值为：
hash: "#edit"
key: "uxs9r5"
pathname: "/home"
search: "?sort=name"
state: {a:1}除了key这个用作唯一表示外，其他的属性都是我们从上一个Link标签中传递过来的参数。
在第三节中我们介绍了React-router的大致使用方法，读一读React-router4.0的源码。
这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的，因此设计到的组件为BrowserRouter、Router、Route和Link
从上一节的介绍中我们知道，点击Link标签传递给新渲染的组件的props中有一个history对象，这个对象的内容很丰富，比如：action、goBack、go、location、push和replace方法等。
React-router构建了一个History类，用于在window.history的基础上，构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。
React-router中将这个新的History类的构建方法，独立成一个node包，包名为history。
npm install history -s
可以通过上述方法来引入，我们来看看这个History类的实现。
const createBrowserHistory = (props = {}) => {
const globalHistory = window.history;
......
//默认props中属性的值
const {
forceRefresh = false,
getUserConfirmation = getConfirmation,
keyLength = 6,
basename = '',
} = props;
const history = {
length: globalHistory.length,
action: "POP",
location: initialLocation,
createHref,
push,
replace,
go,
goBack,
goForward,
block,
listen
}; ---- (1)
const basename = props.basename;
const canUseHistory = supportsHistory(); ----（2)
const createKey = () =>Math.random().toString(36).substr(2, keyLength); ----（3）
const transitionManager = createTransitionManager(); ----（4）
const setState = nextState => {
Object.assign(history, nextState);
history.length = globalHistory.length;
transitionManager.notifyListeners(history.location, history.action);
}; ----（5）
const handlePopState = event => {
handlePop(getDOMLocation(event.state));
};
const handlePop = location => {
if (forceNextPop) {
forceNextPop = false;
setState();
} else {
const action = "POP";
transitionManager.confirmTransitionTo(
location,
action,
getUserConfirmation,
ok => {
if (ok) {
setState({ action, location });
} else {
revertPop(location);
}
}
);
}
}; ------（6）
const initialLocation = getDOMLocation(getHistoryState());
let allKeys = [initialLocation.key]; ------（7）
// 与pop相对应，类似的push和replace方法
const push ... replace ... ------(8)
return history ------ （9）
}(1) 中指明了新的构建方法History所返回的history对象中所具有的属性。
(2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性，具体方法如下：
export const supportsHistory = () => {
const ua = window.navigator.userAgent;
if (
(ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
ua.indexOf("Mobile Safari") !== -1 &&
ua.indexOf("Chrome") === -1 &&
ua.indexOf("Windows Phone") === -1
)
return false;
return window.history && "pushState" in window.history;
};从上述判别式我们可以看出，window.history在chrome、mobile safari和windows phone下是绝对支持的，但不支持安卓2.x以及安卓4.0
(3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位
(4)中 createTransitionManager方法，返回一个集成对象，对象中包含了关于history地址或者对象改变时候的监听函数等，具体代码如下：
const createTransitionManager = () => {
const setPrompt = nextPrompt => {
};
const confirmTransitionTo = (
location,
action,
getUserConfirmation,
callback
) => {
if (typeof getUserConfirmation === "function") {
getUserConfirmation(result, callback);
} else {
callback(true);
}
}
};
let listeners = [];
const appendListener = fn => {
let isActive = true;
const listener = (...args) => {
if (isActive) fn(...args);
};
listeners.push(listener);
return () => {
isActive = false;
listeners = listeners.filter(item => item !== listener);
};
};
const notifyListeners = (...args) => {
listeners.forEach(listener => listener(...args));
};
return {
setPrompt,
confirmTransitionTo,
appendListener,
notifyListeners
};};
setPrompt函数，用于设置url跳转时弹出的文字提示，confirmTransaction函数，会将当前生成新的history对象中的location，action，callback等参数，作用就是在回调的callback方法中，根据要求，改变传入的location和action对象。
接着我们看到有一个listeners数组，保存了一系列与url相关的监听事件数组，通过接下来的appendListener方法，可以往这个数组中增加事件，通过notifyListeners方法可以遍历执行listeners数组中的所有事件。
(5) setState方法，发生在history的url或者history的action发生改变的时候，此方法会更新history对象中的属性，同时会触发notifyListeners方法，传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。
(6)这个getDOMLocation方法就是根据当前在window.state中的值，生成新history的location属性对象，allKeys这是始终保持了在url改变时候的历史url相关联的key，保存在全局，allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时，会保持一个实时的更新。
(7) handlePop方法，用于处理“POP”事件，我们知道在window.history中点击后退等会触发“POP”事件，这里也是一样，执行action为“POP”，当后退的时候就会触发该函数。
(8)中包含了与pop方法类似的，push和replace方法，push方法同样做的事情就是执行action为“PUSH”（“REPLACE”），该变allKeys数组中的值，唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加，而action为“REPLACE”的方法replace则是替换掉当前的元素。
(9)返回这个新生成的history对象。
其实最难弄懂的是React-router中如何重新构建了一个history工厂函数，在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码，接着来看Link组件就很容易了。
首先Link组件类似于HTML中的a标签，目的也很简单，就是去主动触发改变url的方法，主动改变url的方法，从上述的history的介绍中可知为push和replace方法，因此Link组件的源码为：
class Link extends React.Component {
handleClick = event => {
...
const { history } = this.context.router;
const { replace, to } = this.props;
if (replace) {
history.replace(replace);
} else {
history.push(to);
}
}
};
render(){
const { replace, to, innerRef, ...props } = this.props;
<a {...props} onClick={this.handleClick}/>
}
}上述代码很简单，从React的context API全局对象中拿到history，然后如果传递给Link组件的属性中有replace为true，则执行history.replace(to),to 是一个包含pathname的对象，如果传递给Link组件的replace属性为false，则执行history.push(to)方法。
Route组件也很简单，其props中接受一个最主要的属性path，Route做的事情只有一件：
当url改变的时候，将path属性与改变后的url做对比，如果匹配成功，则渲染该组件的componet或者children属性所赋值的那个组件。
具体源码如下：
class Route extends React.Component {
....
constructor(){
}
render() {
const { match } = this.state;
const { children, component, render } = this.props;
const { history, route, staticContext } = this.context.router;
const location = this.props.location || route.location;
const props = { match, location, history, staticContext };
if (component) return match ? React.createElement(component, props) : null;
if (render) return match ? render(props) : null;
if (typeof children === "function") return children(props);
if (children && !isEmptyChildren(children))
return React.Children.only(children);
return null;
}
}state中的match就是是否匹配的标记，如果匹配当前的Route的path，那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。
Router组件中，是BrowserRouter、HashRouter等组件的底层组件。该组件中，定义了包含匹配规则match函数，以及使用了新history中的listener方法，来监听url的改变，从而，当url改变时，更改Router下不同path组件的isMatch结果。
class Router extends React.Component {
componentWillMount() {
const { children, history } = this.props
//调用history.listen监听方法，该方法的返回函数是一个移除监听的函数
this.unlisten = history.listen(() => {
this.setState({
match: this.computeMatch(history.location.pathname)
});
});
}
componentWillUnmount() {
this.unlisten();
}
render() {
}
}上述首先在组件创建前调用了listener监听方法，来监听url的改变，实时的更新isMatch的结果。
本文从前端路由的原理出发，先后介绍了两种前端路由常用的方法，接着介绍了React-router的基本组件API以及用法，详细介绍了React-router的组件中新构建的history对象，最后结合React-router的API阅读了一下React-router的源码。
Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis des React-Router 4.0-Quellcodes, beginnend mit dem Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
