本來這一節(jié)是想按著順序，從前面的react首頁結束，開始說React-router這一節(jié)的，但我覺得很又必要大概說一下，我們?yōu)槭裁匆褂们岸寺酚桑P于前端路由我們所能想到的一些知識點。

1、先說說后端路由

說起前端路由，我們肯定會想到后端路由，我們以前經常看見訪問一個網址，大概路徑是這個樣子的，比如：

www.xx.com/index

www.xx.com/index.do

www.xx.com/index.action

www.xx.com/index.jsp

www.xx.com/index.html

等等這些，其實都大概可以看出后端路由的影子，這些平臺或者網站，你幾乎每添加一個展示頁面，都需要后臺代碼的支撐，或者需要后臺架構某些配置項的支撐，否則你添加的頁面是無法展示到客戶眼前的。

而且既然是后臺路由，那么我們展示的每個url路徑肯定是受后臺控制的，言外之意就是我們本來要訪問index.html，但當用戶輸入www.xx.com/index.html的時候，后臺是可以做攔截處理的，后臺甚至可以把路徑進行重定向，結果給我們展示了list.html；所以只有后臺給我們攔截以后再放開這個攔截，前端的頁面才得以展示；這樣我們就可以得出，幾乎每個頁面的展示都要受網速的限制，受我們后臺架構是否足夠優(yōu)化的限制，我們大多數(shù)頁面都需要用ajax來獲取數(shù)據來進行展示，但當我們點擊瀏覽器的回退按鈕的時候，經常會出現(xiàn)這樣一個bug，前一個頁面的ajax數(shù)據就不見了，不得不重新獲取，而且網頁回退，你會發(fā)現(xiàn)你的js邏輯會重新走一遍，但如果前一個頁面因為我們用js邏輯修改過html內容，html是不會重新渲染的。說得更直白點就是，比如我們有一個div，我們用js給他動態(tài)添加了一個自定義屬性aname="1" ，當點擊回退按鈕的時候，aname=“1”還在，html內容不會重新渲染。

2、前端路由又有哪些好處？

剛才我們說了后端路由，其實后端路由有點原始，甚至是好幾年前的前后臺不分工的情況下很常用的，那個時候天還是藍的沒有什么霧霾，蘋果也是用來吃的，人們對頁面要求度也是不高的，更多的是關注后臺邏輯功能，慢慢的互聯(lián)網行業(yè)起來了，人們發(fā)現(xiàn)前臺頁面是否友好，效果是否絢爛，色覺是否舒服，交互是否順暢，流程是否簡約，加載速度是否夠快，都在一定程度上決定著你這個網站在用戶心中的分值。

那么前端路由給我們帶來什么好處呢？

（1） 有了前端路由，其實更利于我們做前后端分離開發(fā)，后端寫他們自己的后臺邏輯，給我們提供一些跨域的接口，或者是我們本地模擬跨域，后臺先給我們準備一些測試數(shù)據，這樣將更有利于我們前端開發(fā)；以前開發(fā)前端，總是等待后臺給添加數(shù)據，這樣無形中造成了時間成本；等項目開發(fā)完成，前端代碼可以部署在獨自一臺服務器下，也可以再和后臺代碼進行整合，部署在同一臺服務器下；

（2）前端路由就是前端控制跳轉，這個頁面的展示速度不再受后臺控制，甚至比我們剛學html的時候，通過a標簽的href跳轉更快；

（3）前端路由雖然表現(xiàn)的和后端路由也比較相似，但很多時候通過前端路由我們可以做模塊化思路開發(fā)，讓思路變得更清晰，而且使用了react以后你會慢慢發(fā)現(xiàn)，我們甚至可以多個人協(xié)同完成同一個頁面的內容，因為我們可以每人完成一個小組件；

（4）前端路由形式也很多，現(xiàn)在比較提倡app單頁開發(fā)，所以前端路由用于單頁開發(fā)以后，你會發(fā)現(xiàn)點擊瀏覽器回退按鈕后，之前的ajax獲取的數(shù)據仍然是存在的，為我們節(jié)省了前后臺數(shù)據交互

其實好處那么多，我更看中第一條，前端可以脫離開后臺架構的路由控制

3、前端路由有哪些形式？

前端路由形式也很多，這些都是架構決定的，換言之就是寫前端框架的人的思路。我們很多時候總會羨慕別人發(fā)家致富，很多時候我們也驚奇的發(fā)現(xiàn)別人起家的思路我們也曾有過，所以不管在哪個時代，有思路的人值得我們羨慕，將思路可以很好的運用的人更值得我們崇拜。

（1） 之前用過jquery-mobile的時候，其實整個APP會在一個大htm里來開發(fā)，每個小頁面在一個小div里進行開發(fā)，當前需要展示那個div，就把其他div都隱藏，把當前這個div進行展示。因為大部分數(shù)據是需要后臺獲取的，所以加載頁面的時候頁面里可能更多的是一些空的dom元素，這樣也不會太影響頁面的加載速度；當我們點擊切換到其他頁面的時候再進行數(shù)據獲??；當我們再切換到其他頁面的時候，這個頁面的數(shù)據已經被緩存，達到了一個很好的單頁面APP的效果。

這種思路，首頁路徑展示為www.xx.com/index.html，列表頁（其實也就是列表那個div）路徑展示為www.xx.com/index.html#list，其實列表頁的那個div的id就是list，對應著的詳情頁路徑展示為www.xx.com/index.html#detail，所以詳情頁的對應div的id頁應該是detail

（2）react-router 同樣也是單頁面開發(fā)的前端路由，只不過時代進步了，他更多的體現(xiàn)出了模塊化區(qū)分開發(fā)的思路。每個頁面就不是一個div了，而且采用es6的模塊化，每個所謂的頁面變成了獨立的模塊，后續(xù)我們會說到react-router使用后，每個頁面的展示思路；

（3） 接觸過angularjs的小伙伴們會發(fā)現(xiàn)，前端路由可以指配html頁面，根據angular前端路由來控制哪個路徑下應該由哪個html的內容渲染到我們的主頁面上；

其實說了那么多，小伙伴們可能覺得很麻煩，我還不如準備好多html,自己來控制a標簽的href跳轉呢。這就看你的項目更適合哪種情況，你殺死了敵人，不會有首長因為你使用的是菜刀而不是大炮而批評你的，大炮雖然更先進，但需要花時間去學習如何使用，會消耗炮彈，需要運送費用等等，所以我們的開發(fā)中，沒有最適合，只有更合適。

4、絕對路徑的base標簽

既然說到前后斷分離開發(fā)，那么就會有一個絕對路徑和相對路徑的問題。以前做jsp項目開發(fā)的時候，大部分時候使用的絕對路徑，后來做分離開發(fā)使用的是相對路徑，但上線要和后臺代碼部署到同一個tomcat下，結果我的相對路徑就出了問題，很不好改。html中有base這個標簽，base標簽會有href屬性，這個是頁面的基準路徑。舉個栗子，比如我們給頁面設定 base href="www.xx.com/" ?，然后頁面引入css的時候 link rel="stylesheet" href="style/demo.css" ?，其實最終你的這個demo.css展示的路徑就是www.xx.com/style.demo.css了，是不是很好用呢。

相信隨著時間和技術的發(fā)展，前端路由以后一定會出現(xiàn)更多種形式，而且react-router的各個版本使用姿勢都不一樣。我們期待著以后的架構將會學習成本越來越低，功能越來越強悍，我們也期待著自己懂得越來越多，但事情往往事與愿違，我們總是需要不斷得跟隨著先行者們去學習。前端框架不斷得出現(xiàn)，先行者們不斷得發(fā)大招，我們不經意間就被秒殺得體無完膚，但卻也是更多得無奈，還是得勇敢得站起來，去學習，去進取以避免被快速得技術發(fā)展所淘汰。我還是希望能給更多得小伙伴帶來一些易學易懂得東西，喜歡得小伙伴請關注下一節(jié)：狗屎一樣的React（第八節(jié)，React-router 4.0的使用姿勢）