摘要：中的包中的包主要有三個(gè)和。的理念上面提到的理念是一切皆組件以下統(tǒng)一稱組件。從這點(diǎn)來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認(rèn)為是或的路由入口。將該標(biāo)示為嚴(yán)格匹配路由。的屬性追加一條。

2019年不知不覺已經(jīng)過去19天了，有沒有給自己做個(gè)總結(jié)？有沒有給明年做個(gè)計(jì)劃？
當(dāng)然筆者已經(jīng)做好了明年的工作、學(xué)習(xí)計(jì)劃；同時(shí)也包括該系列博客剩下的博文計(jì)劃，目前還剩4篇：分別是兩篇React-Router4和兩篇immutability-helper。本篇是React-Router4的第一篇，在正式開始之前大家可以先看下實(shí)際效果，這是筆者用React-Router4寫的例子。

實(shí)際上，筆者接觸的第一個(gè)React中的路由模塊就是React-Router，只不過當(dāng)時(shí)還是v3版本。因?yàn)闆]有太多深入得學(xué)習(xí)研究，所以在這里不會(huì)對(duì)v4之前的版本作介紹或者評(píng)價(jià)(其實(shí)并不代表筆者對(duì)v4版本有深入的研究學(xué)習(xí)，汗...)。下面列舉些React-Router4中需要知道的一些概念或者emmmm...小知識(shí)點(diǎn)。

React-Router4中的包主要有三個(gè)react-router、react-router-dom和react-router-native。據(jù)考證(手動(dòng)斜眼笑)，React-Router4已經(jīng)將前身切分了出來分別整合成了多帶帶的module。其實(shí)筆者一開始看到也挺懵逼的，這三個(gè)包到底是什么玩意？

react-router:“The core of React Router”。簡(jiǎn)單說就是邏輯代碼。
react-router-dom:“DOM bindings for React Router”。這個(gè)模塊不僅僅包含了react-router的模塊，還包含了頁(yè)面渲染功能，也就是可以在頁(yè)面上顯示。
react-router-native:“React Native bindings for React Router”。這個(gè)也很好理解，就是可以在React-Native中使用。

React-Router4的理念是一切皆組件。React-router-dom則提供了兩個(gè)路由根節(jié)點(diǎn):HashRouter和BrowserRouter。

HashRouter: 通過hash值來對(duì)路由進(jìn)行控制，而且你會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象就是url中會(huì)有個(gè)#，例如localhost:3000/#。對(duì)于筆者這種有強(qiáng)迫癥的人來說怎么能忍？所以筆者就沒再碰這個(gè)組件。
BrowserRouter: BrowserRouter就相對(duì)舒服點(diǎn)。它的原理是使用HTML5 history API (pushState, replaceState, popState)來使你的內(nèi)容隨著url動(dòng)態(tài)改變的，而不會(huì)出現(xiàn)莫名其妙的#。

上面提到：React-Router4的理念是一切皆組件(以下統(tǒng)一稱“組件”)。我們v4之前的版本都需要在一個(gè)js文件中配置整個(gè)項(xiàng)目的路由信息然后在App.js(以create-react-app腳手架創(chuàng)建的React項(xiàng)目為例)引入并使用。而在React-Router4中則將所有的功能以React組件的形式提供出來，意思就是說我們可以像使用普通組件一樣使用路由組件并最終在項(xiàng)目中形成一棵路由樹。在這里筆者要注重說下，一個(gè)項(xiàng)目中盡量只有一棵路由樹，除非有特殊需求，否則的話會(huì)造成一些奇怪的問題。通俗點(diǎn)說就是不要在一棵樹上栽另一棵樹。下面用一張圖來簡(jiǎn)單展示下React-Router4的使用：

如圖是React-Router4使用規(guī)則和最簡(jiǎn)單的使用實(shí)踐。
當(dāng)然這種寫法(我稱它叫組件型路由，下同)和之前的配置型路由哪個(gè)更好用是青菜蘿卜的問題，不需要太多糾結(jié)，自己喜歡就好。接下來的介紹都是筆者通過學(xué)習(xí)官方文檔并做了一些實(shí)踐后的心得。如有不當(dāng)或者錯(cuò)誤，歡迎指正。對(duì)于第一次學(xué)習(xí)該模塊的童鞋，筆者建議將代碼下載下來一遍看代碼一遍看本文，也可以打開筆者的demo，這樣會(huì)更深刻。

下面這段代碼是該demo根路由配置的代碼(其實(shí)不存在什么根路由概念，只是筆者喜歡這么叫它)。從這里就能明顯看出來react-router3和4兩個(gè)版本的差異。react-router3有自己獨(dú)立的一個(gè)配置中心文件，而react-router4則把跳轉(zhuǎn)的規(guī)則嵌入到實(shí)際代碼中，不需要額外維護(hù)一個(gè)路由配置文件。從這點(diǎn)來說的確方便了不少，也迎合React一切皆組件的理念。

從這段代碼中需要了解的概念包括：Router、NavLink、Route、Redirect、exact、Switch。

上面已經(jīng)介紹過了，這里筆者用的是BrowserRouter

NavLink可以觸發(fā)路由的跳轉(zhuǎn)，當(dāng)然類似的組件還有Link。它們都可以通過指定屬性to的值來告訴Router我們要跳轉(zhuǎn)到那個(gè)Route，實(shí)際上NavLink（Link）和Route本就已經(jīng)通過to和path兩個(gè)屬性建立起關(guān)系了。而NavLink與Link的區(qū)別在于各自API的數(shù)量，因?yàn)镹avLink可用的API相對(duì)較多，所以筆者更青睞NavLink。具體API有興趣的可以自行Google，常用的API筆者已經(jīng)在項(xiàng)目中使用。

Route組件是React Router4中主要的組成單位，可以認(rèn)為是NavLink或Link的路由入口。在這里筆者要重點(diǎn)Tip一下，上一條說NavLink或Link可以觸發(fā)路由的跳轉(zhuǎn)，實(shí)際上它們的實(shí)現(xiàn)流程是這樣的：

NavLink(Link)改變地址欄的pathname，Router會(huì)根據(jù)pathname去匹配它子組件中的Route中的path屬性，一旦匹配上就會(huì)渲染該Route對(duì)應(yīng)的組件`。所以NavLink(Link)與Route并沒有并存的關(guān)系，因?yàn)镹avLink(Link)只是用來改變pathname，不會(huì)直接去調(diào)用任何API。所以當(dāng)我們?cè)诘刂窓谥苯邮謩?dòng)輸入路由，也會(huì)發(fā)生路由渲染。

具體匹配規(guī)則請(qǐng)參考path-to-regexp，或者通過這個(gè)網(wǎng)站進(jìn)行測(cè)試。

Redirect相當(dāng)于轉(zhuǎn)發(fā)器。Router內(nèi)部去匹配路由入口的時(shí)候也會(huì)去匹配Redirect的from屬性值。一旦匹配到了Redirect，Redirect就會(huì)將這個(gè)跳轉(zhuǎn)請(qǐng)求轉(zhuǎn)向自己的to屬性值對(duì)應(yīng)的路由。所以這個(gè)過程可以這樣理解：當(dāng)我們?cè)L問頁(yè)面路徑的時(shí)候，比如：http://ip:3001/，就會(huì)捕獲到"/"這個(gè)路由跳轉(zhuǎn)請(qǐng)求，Router開始在Route中匹配隨后匹配到了Redirect，Redirect自行發(fā)起路由跳轉(zhuǎn)請(qǐng)求"/basic"，Router開始像往常一樣在Route中匹配直到匹配到了path為"/basic"的Route，隨后對(duì)Route對(duì)應(yīng)的component進(jìn)行渲染。

exact將該Route標(biāo)示為嚴(yán)格匹配路由。什么叫嚴(yán)格匹配路由？就是pathname必須與Route的path屬性值完全一致才算匹配上。例如：

這里Tip下：
如果某個(gè)Route對(duì)應(yīng)的組件中也有Route，那么千萬不要 在這個(gè)Route中加 exact，不然你會(huì)發(fā)現(xiàn)完全匹配不到子路由。切記，因?yàn)楣P者最近剛踩過這個(gè)坑。所以這里筆者建議大家只在葉子Route中使用exact，也就是最后一級(jí)Route中使用exact，當(dāng)然 exact "/" 除外。

Switch可以將多個(gè)Route包裹成一組Route，當(dāng)進(jìn)行路由匹配時(shí)候，該組中的路由一旦發(fā)生匹配那么就不會(huì)匹配改組中剩下的路由。也就是說該組中的路由最多只會(huì)被匹配到一個(gè)。

追加一條。
Route的component屬性對(duì)應(yīng)的屬性值通常是一個(gè)組件或者一個(gè)方法。而如果是方法的話，比如例子中：

const renderBasicRouter = ({ match }) => ;

那么傳入的參數(shù)為：

所以如果在跳轉(zhuǎn)前有什么特殊邏輯需要處理，比如我們想讓不同的頁(yè)面有不同的前綴，比如例子中的/basic/Home、/param/home等，那么就可以如例子一樣處理。
但如果不需要特殊處理的話，直接把組件放到component屬性下即可。當(dāng)然router相關(guān)的參數(shù)也會(huì)通過props傳給該組件。

這里Tip下：
1、Route中還有一個(gè)render屬性，也可以用來渲染組件，但是當(dāng)我們渲染被Redux處理過的組件時(shí)候可能會(huì)有問題，因?yàn)镽edux會(huì)在原組件基礎(chǔ)上多包裹一層。
2、如果

當(dāng)然常用路由組件還不僅僅這些，后續(xù)例子會(huì)有補(bǔ)充。

基礎(chǔ)路由的使用比較簡(jiǎn)單，前面的介紹其實(shí)已經(jīng)把它基礎(chǔ)使用方法已經(jīng)說了。不過筆者這里有個(gè)小tip:

match.url 常用于NavLink或者Link中拼接路由路徑，比如：

match.path常用于Route中拼接路由入口路徑，比如：

這里Tip下：
當(dāng)URL中不帶有任何參數(shù)的時(shí)候，match.path和match.url完全一致。如果帶有參數(shù)的話可能會(huì)有點(diǎn)編碼上的差異。

帶參路由在實(shí)際開發(fā)中用的比較多，這里只介紹location.pathname中的參數(shù)，location.search筆者沒有研究過所以就不說了，免得誤導(dǎo)大家。我們可以先看下demo例子的部分代碼：

這里可以看到Route的配置有點(diǎn)不同，用過express的朋友都知道，路由中通過 :xxx 來標(biāo)示這是一個(gè)參數(shù)。其實(shí)這里也一樣。如例子所示我們?cè)?path={${PATH}/name/:name}通過 :name 來標(biāo)示這是一個(gè)參數(shù)。然后對(duì)應(yīng)的導(dǎo)航也有 to={${URL}/name/Mario}。所以這個(gè)流程就相當(dāng)于：導(dǎo)航到/name路由并且傳 name為Mario的參數(shù)。這個(gè)參數(shù)可以在對(duì)應(yīng)組件的props中拿到(this.props.match.prams.name)。我們還看到 path={${PATH}/check/:check(true|false)}，在參數(shù)后有個(gè)括號(hào)并且里面還有管道符，其實(shí)這是限定check的參數(shù)值必須為true或者false這兩個(gè)。細(xì)心的朋友可能注意到，我在每個(gè)Route中加了exact，這樣做的好處是可以不用考慮Route的放置次序。舉個(gè)例子解釋下：如果我們想查看某個(gè)人的信息，那么跳轉(zhuǎn)路由應(yīng)該是 /user/4，但如果Route中有：

那么/user/4就會(huì)在匹配到/user后停下渲染User組件并且忽略了參數(shù)。有人說把Switch去掉不就行了嗎？并不是，那么/user/4會(huì)同時(shí)匹配上這兩個(gè)路由并且什么都不會(huì)渲染，因?yàn)樗卤屏?，不知道渲染哪個(gè)。所以這種情況下需要調(diào)整它們的位置

這樣就不會(huì)出現(xiàn)上述問題了。但是如果在每一個(gè)Route中使用exact(前提是這個(gè)Route是葉子Route)，就不用考慮Route的次序問題了。

有時(shí)候會(huì)由于各種問題出現(xiàn)匹配不到任何Route的情況，這個(gè)時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn)，我們會(huì)配置一個(gè)404路由，形如：

不過筆者發(fā)現(xiàn)在根路由中配置一個(gè)404后無法全局抓取路由404，不知道是本就如此還是用法有誤，所以筆者在每一級(jí)路由中都配置了 。寫法很簡(jiǎn)單，照著寫就好了，component中傳入顯示404信息的組件即可。

順便加一下demo源碼