眾所周知，在web前端開(kāi)發(fā)單頁(yè)面使用路由目前有兩種方式可以實(shí)現(xiàn)，一種是使用hash模式，另外一種就是history模式，今天小千就來(lái)給大家介紹一下這個(gè)history模式，喜歡的話記得收藏。

      history 模式

      路由原理：

      History 模式是 HTML5 新推出的功能，基于pushState和popstate兩個(gè)api實(shí)現(xiàn)的，比之 Hash 模式更加美觀。

      當(dāng)首次進(jìn)入項(xiàng)目，向服務(wù)器發(fā)送請(qǐng)求，后端需要配合重定向，凡是處理不了的請(qǐng)求都響應(yīng)單頁(yè)面的html。跳轉(zhuǎn)進(jìn)入路由由pushState完成，并且匹配路由顯示對(duì)應(yīng)的頁(yè)面。而路由執(zhí)行回退時(shí)，監(jiān)聽(tīng)popstate事件，顯示對(duì)應(yīng)的頁(yè)面。

      react代碼實(shí)現(xiàn)：

      1.使用react腳手架構(gòu)建一個(gè)react的項(xiàng)目：

      >npx create-react-app my-app

      2.創(chuàng)建兩個(gè)組件home.js,setting.js，使用history路由來(lái)實(shí)現(xiàn)兩個(gè)組件的切換。

      項(xiàng)目目錄如下：

      3.在App.js文件中，我們需要實(shí)現(xiàn)如下的效果：

      4.整個(gè)結(jié)構(gòu)使用Router組件包裹，由Route組件承載每一項(xiàng)路由的組件，由Link標(biāo)簽實(shí)現(xiàn)切換。那么我們來(lái)看一下router內(nèi)部如何實(shí)現(xiàn)的。

      先來(lái)看一下router文件夾的結(jié)構(gòu)：

      組件Router，Route，Link在router/Route.js,router /Route.js,route/Link.js三個(gè)文件中實(shí)現(xiàn)。router/index.js將三個(gè)組件集成方便外部調(diào)用。來(lái)看一下index.js的內(nèi)容：

      5.整個(gè)路由項(xiàng)目被Router標(biāo)簽包裹，實(shí)際上需要達(dá)到共享路由當(dāng)前地址的目的，借助react中的context來(lái)實(shí)現(xiàn)。同時(shí)Router組件需要在項(xiàng)目首次加載時(shí)解析當(dāng)前的pathname值。并且監(jiān)聽(tīng)瀏覽器回退事件，也需要修改路由共享地址的值。另外，項(xiàng)目每一次重新進(jìn)入，不管訪問(wèn)地址是什么，都需要后臺(tái)響應(yīng)index.html頁(yè)面，加載項(xiàng)目代碼，由前端項(xiàng)目來(lái)控制顯示路由管理的組件(這部分需求需要后臺(tái)配合實(shí)現(xiàn))。修改代碼如下：

      6.Route組件是根據(jù)當(dāng)前的history地址判斷當(dāng)前的Route承載的組件是否應(yīng)該顯示，代碼如下：

      注：如果需要實(shí)現(xiàn)路由嵌套和動(dòng)態(tài)路由，當(dāng)前的history地址和組件配置的地址比較就不是使用===判斷這么簡(jiǎn)單了，在這里我不做陳述，感興趣的話可以自己研究一下。

      7.Link組件需要觸發(fā)使用pushState切換瀏覽器地址而有不會(huì)向服務(wù)器請(qǐng)求，并且修改context中的history地址。代碼如下：

      最后如果你對(duì)web前端開(kāi)發(fā)感興趣的話不妨來(lái)千鋒教育了解一下我們的前端開(kāi)發(fā)培訓(xùn)課程，現(xiàn)在咨詢還有免費(fèi)前端學(xué)習(xí)資料可以領(lǐng)取，快來(lái)看一看吧。