眾所周知，在web前端開發(fā)單頁面使用路由目前有兩種方式可以實現(xiàn)，一種是使用hash模式，另外一種就是history模式，今天小千就來給大家介紹一下這個history模式，喜歡的話記得收藏。
history 模式
路由原理：
History 模式是 HTML5 新推出的功能，基于pushState和popstate兩個api實現(xiàn)的，比之 Hash 模式更加美觀。
當首次進入項目，向服務器發(fā)送請求，后端需要配合重定向，凡是處理不了的請求都響應單頁面的html。跳轉(zhuǎn)進入路由由pushState完成，并且匹配路由顯示對應的頁面。而路由執(zhí)行回退時，監(jiān)聽popstate事件，顯示對應的頁面。
react代碼實現(xiàn)：
1.使用react腳手架構(gòu)建一個react的項目：
>npx create-react-app my-app
2.創(chuàng)建兩個組件home.js,setting.js，使用history路由來實現(xiàn)兩個組件的切換。
項目目錄如下：
3.在App.js文件中，我們需要實現(xiàn)如下的效果：
4.整個結(jié)構(gòu)使用Router組件包裹，由Route組件承載每一項路由的組件，由Link標簽實現(xiàn)切換。那么我們來看一下router內(nèi)部如何實現(xiàn)的。
先來看一下router文件夾的結(jié)構(gòu)：
組件Router，Route，Link在router/Route.js,router /Route.js,route/Link.js三個文件中實現(xiàn)。router/index.js將三個組件集成方便外部調(diào)用。來看一下index.js的內(nèi)容：
5.整個路由項目被Router標簽包裹，實際上需要達到共享路由當前地址的目的，借助react中的context來實現(xiàn)。同時Router組件需要在項目首次加載時解析當前的pathname值。并且監(jiān)聽瀏覽器回退事件，也需要修改路由共享地址的值。另外，項目每一次重新進入，不管訪問地址是什么，都需要后臺響應index.html頁面，加載項目代碼，由前端項目來控制顯示路由管理的組件(這部分需求需要后臺配合實現(xiàn))。修改代碼如下：
6.Route組件是根據(jù)當前的history地址判斷當前的Route承載的組件是否應該顯示，代碼如下：
注：如果需要實現(xiàn)路由嵌套和動態(tài)路由，當前的history地址和組件配置的地址比較就不是使用===判斷這么簡單了，在這里我不做陳述，感興趣的話可以自己研究一下。
7.Link組件需要觸發(fā)使用pushState切換瀏覽器地址而有不會向服務器請求，并且修改context中的history地址。代碼如下：
最后如果你對web前端開發(fā)感興趣的話不妨來千鋒教育了解一下我們的前端開發(fā)培訓課程，現(xiàn)在咨詢還有免費前端學習資料可以領取，快來看一看吧。
京公網(wǎng)安備 11010802030320號