web前端技術分享：使用react實現簡易路由

      眾所周知，在 web前端開發單頁面使用路由目前有兩種方式可以實現，一種是使用hash模式，另外一種就是history模式，今天小千就來給大家介紹一下這個history模式，喜歡的話記得收藏。

      history 模式

      路由原理：

      History 模式是 HTML5 新推出的功能，基於pushState和popstate兩個api實現的，比之 Hash 模式更加美觀。

      當首次進入專案，向伺服器傳送請求，後端需要配合重定向，凡是處理不了的請求都響應單頁面的html。跳轉進入路由由pushState完成，並且匹配路由顯示對應的頁面。而路由執行回退時，監聽popstate事件，顯示對應的頁面。

      react程式碼實現：

      1.使用react腳手架構建一個react的專案：

      >npx create-react-app my-app

      2.建立兩個元件home.js,setting.js，使用history路由來實現兩個元件的切換。

      專案目錄如下：

      3.在App.js檔案中，我們需要實現如下的效果：

      4.整個結構使用Router元件包裹，由Route元件承載每一項路由的元件，由Link標籤實現切換。那麼我們來看一下router內部如何實現的。

      先來看一下router資料夾的結構：

      元件Router，Route，Link在router/Route.js,router /Route.js,route/Link.js三個檔案中實現。router/index.js將三個元件整合方便外部呼叫。來看一下index.js的內容：

      5.整個路由專案被Router標籤包裹，實際上需要達到共享路由當前地址的目的，藉助react中的context來實現。同時Router元件需要在專案首次載入時解析當前的pathname值。並且監聽瀏覽器回退事件，也需要修改路由共享地址的值。另外，專案每一次重新進入，不管訪問地址是什麼，都需要後臺響應index.html頁面，載入專案程式碼，由前端專案來控制顯示路由管理的元件(這部分需求需要後臺配合實現)。修改程式碼如下：

      6.Route元件是根據當前的history地址判斷當前的Route承載的元件是否應該顯示，程式碼如下：

      注：如果需要實現路由巢狀和動態路由，當前的history地址和元件配置的地址比較就不是使用===判斷這麼簡單了，在這裡我不做陳述，感興趣的話可以自己研究一下。

      7.Link元件需要觸發使用pushState切換瀏覽器地址而有不會向伺服器請求，並且修改context中的history地址。程式碼如下：