この記事では、ルーティングから始まる React-router 4.0 のソース コードについて詳しく説明します。必要な方は参考にしていただければ幸いです。
react-router などのフロントエンドルーティングの原理はほぼ同じで、更新せずに別のページの表示に切り替えることができます。ルーティングの本質は、ページの URL が変更された場合、ページの表示結果は URL の変更に応じて変更される可能性がありますが、ページは更新されないことです。シングル ページ (SPA) アプリケーションは、フロントエンド ルーティングを通じて実装できます。この記事では、まずフロントエンド ルーティングの原理から始めて、フロントエンド ルーティングの原理の変更について詳しく紹介します。次に、react-router4.0 のソース コードから始めて、react-router4.0 がフロントエンド ルーティングを実装する方法を深く理解します。
1. Hash によるフロントエンド ルーティングの実装 1 、ハッシュの原則
初期のフロントエンド ルーティングはハッシュによって実装されました:
URL のハッシュ値を変更してもページは更新されません。
したがって、フロントエンド ルーティングはハッシュを通じて実装でき、それによってリフレッシュ不要の効果が実現します。ハッシュ属性は location オブジェクト内にあり、
window.location.hash='edit' ログイン後にコピー
を使用して現在の URL のハッシュ値を変更できます。上記のハッシュ割り当てを実行すると、ページの URL が変わります。
割り当て前: http://localhost:3000
割り当て後: http://localhost:3000/#edit
# で終わるハッシュ値がさらにあります。ただし、割り当ての前後でページのハッシュ値が変化するため、ページの完全な URL は変更されますが、ページは更新されません。また、hashchange というハッシュの変化を監視できるイベントがあり、次の 2 つの方法でハッシュの変化を監視できます。
window.onhashchange=function(event){
console.log(event);
}
window.addEventListener('hashchange',function(event){
console.log(event);
}) ログイン後にコピー
ハッシュ値が変化すると、HashChangeEvent が出力されます。 HashChangeEvent の具体的な値は次のとおりです。
{isTrusted: true, oldURL: "http://localhost:3000/", newURL: "http://localhost:3000/#teg", type: "hashchange".....} ログイン後にコピー
リスニング イベントがあり、変更されたハッシュ ページが更新されない場合、リスニング イベントのコールバック関数でさまざまな UI 表示を表示および非表示にする機能を実行できます。したがって、フロントエンドルーティングを実装します。
さらに、現在のページのハッシュ値を変更するには、window.location.hash を使用する以外に、html の a タグを使用することもできます:
<a href="#edit">edit</a> ログイン後にコピー
2 の欠点。 hash
ハッシュは互換性が高いため、初期のフロントエンドルーティングで広く使用されましたが、ハッシュの使用には多くの欠点もあります。
検索エンジンはハッシュを含むページには不向きです
ハッシュを含むページでのユーザーの行動を追跡するのは困難です
2. 履歴によるフロントエンド ルーティングの実装
HTML5 の History インターフェイスである History オブジェクトは最下位インターフェイスであり、どのインターフェイスからも継承されません。 History インターフェースを使用すると、ブラウザーのセッション履歴を操作できます。
(1)History のプロパティとメソッド
History にはいくつかのプロパティとメソッドが用意されています。
履歴属性:
History.length: 現在のセッション ページを含む、セッション履歴に存在するレコードの数を返します。さらに、新しいタブを開いた場合、長さの値は 1
History.state:
保存されている場合、popState イベントメソッド、渡される属性オブジェクト (pushState メソッドと replaceState メソッドで詳しく説明します)
History メソッド:
History.back() : ブラウジングに戻る ブラウザ セッション履歴の前のページには、ブラウザの戻るボタンと同じ機能があります。
History.forward(): ブラウザ セッション履歴の次のページを指します。ブラウザの「戻る」ボタンと同じです。「進む」ボタンも同じです。
History.go(): ブラウザのセッション履歴の指定したレコードページにジャンプできます。
History.pushState(): PushState は、指定されたデータをブラウザーのセッション履歴スタックにプッシュできます。このメソッドは、オブジェクト、タイトル、および URL の文字列の 3 つのパラメーターを受け取ります。 PushState の後、現在のページの URL は変更されますが、更新は伴いません。
History.replaceState():replaceState は、現在のセッション ページの URL を次の URL に置き換えます。 replaceState の後、現在のページの URL も変更されますが、ページは更新されません。
上記のメソッドでは、pushState と repalce は同じ点を持っています。
どちらも現在のページに表示される URL を変更しますが、ページは更新されません。
違い:
pushState はブラウザのセッション履歴スタックにプッシュされ、これにより History.length が 1 増加しますが、replaceState は Replace です。現在のセッション履歴なので、 History.length.
(2) ブラウザの BOM オブジェクト モデル内の BOM オブジェクト履歴
history は、完全に増加しません。 History インターフェイスを継承しているため、History のすべてのプロパティとメソッドが含まれています。
ここでは主に、history.length プロパティと、history.pushState およびhistory.replaceState メソッドについて説明します。
history.pushState(stateObj,title,url) またはhistory.replaceState(stateObj,title,url)
pushState および replaceState は 3 を受け入れますパラメーター、つまり状態オブジェクト、タイトル title、および変更された URL。
window.history.pushState({foo:'bar'}, "page 2", "bar.html");
此时，当前的url变为：
执行上述方法前：http://localhost:3000
如果我们输出window.history.state:
console.log(window.history.state);
window.history.state就是我们pushState的第一个对象参数。
history.replaceState()方法不会改变hitroy的长度
console.log(window.history.length);
上述前后两次输出的window.history.length是相等的。
此外。
每次触发history.back()或者浏览器的后退按钮等，会触发一个popstate事件，这个事件在后退或者前进的时候发生：
window.onpopstate=function(event){
} ログイン後にコピー
注意：
如果用history做为路由的基础，那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址，且如果页面发生回退back或者forward时，会触发popstate事件。
hisory为依据来实现路由的优点：
缺点：
三、React-router4.0的使用
了解了前端路由实现的原理之后，下面来介绍一下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都是以组件的形式来使用。
1、React-router-dom常用的组件API
下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。
(1)
用 组件包裹整个App系统后，就是通过html5的history来实现无刷新条件下的前端路由。
组件具有以下几个属性：
如果设置了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节点，表示唯一渲染一个元素。
与对应的是,使用url中的hash属性来保证不重新刷新的情况下同时渲染页面。
(2)
组件十分重要， 做的事情就是匹配相应的location中的地址，匹配成功后渲染对应的组件。下面我们来看中的属性。
首先来看如何执行匹配，决定地址匹配的属性：
举例来说，当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的时候：
<Route path='/home/' component={Home}/> ログイン後にコピー
此时http://localhost:3000/home 和 http://localhost:3000/home/
<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。
(3)
定义了匹配规则和渲染规则，而匹配。
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。
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}也同样做为参数传递到新渲染的组件中。
(4) React-router中传递给组件props的history对象
介绍了 、 和
我们前面提到，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}/> ログイン後にコピー
我们使用了，该组件利用了window.history对象，当点击Link标签跳转后，会渲染新的组件Home，我们可以在Home组件中输出props中的history：
// 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这个属性左右很大，如果是通过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属性中，就记录了从就组件中传递过来的参数，从上面的例子中，我们看到此时的location的值为：
hash: "#edit"
key: "uxs9r5"
pathname: "/home"
search: "?sort=name"
state: {a:1} ログイン後にコピー
除了key这个用作唯一表示外，其他的属性都是我们从上一个Link标签中传递过来的参数。
四、React-router4.0源码分析
在第三节中我们介绍了React-router的大致使用方法，读一读React-router4.0的源码。
这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的，因此设计到的组件为BrowserRouter、Router、Route和Link
1、React-router中的history
从上一节的介绍中我们知道，点击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）
} ログイン後にコピー
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对象。
2、React-router中Link组件
其实最难弄懂的是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)方法。
3、React-router中Route组件
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组件。
4、React-router中Router组件
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的结果。
5、总结
本文从前端路由的原理出发，先后介绍了两种前端路由常用的方法，接着介绍了React-router的基本组件API以及用法，详细介绍了React-router的组件中新构建的history对象，最后结合React-router的API阅读了一下React-router的源码。
以上がルーティングから始まるreact-router 4.0ソースコードの深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
