react-router 4.0 升級攻略

      react-router 4.0 出來好9了，項目在4月份的時候對react-router進行了升級，升級耗費了3天，一個坑一個坑踩了過來。

      按照公司項目狀況說下升級改了哪些，項目使用的是hashHistory，（BrowserHistory 的狀況就不清楚了）

           中文文檔  https://reacttraining.cn/  好像https簽名出問題了，打不開，能夠 gtihub項目  下載在，npm 安裝 start下

　　　1.  package.json 配置修改

                   "react-router": "4.1.1",        

                   "react-router-dom": "4.1.1",

　　　2.  Router.jsx 修改

　　　　 原來的是這個樣子的

                      

 

                如今的樣子

                     

                     a.文檔中比較多的例子直接使用 HashRouter 對象，可是在使用的時候有些問題，見下面介紹，因此用了<Router history={hashHistory}>，是本身建立的一個history模塊https://github.com/ReactTraining/history的實例hashHistory

                     b.Switch 組件，Route組件

                         Route組件的exact 屬性--------要求路徑與location.pathname必須 徹底 匹配，在項目中有exact==false狀況是，路由裏面嵌套了子路由切換邏輯https://reacttraining.com/react-router/web/api/Route/exact-bool

           3.loctaion對象獲取與withRouter  https://reacttraining.com/react-router/web/api/withRouter

                 原來的是這個樣子的  

　　　　　　   原來都是在頂層 Route 的 設置的component 組件往下面傳遞的,  withRouter 也能夠的2.0已經有了

                 如今的樣子

                        經過withRouter函數包裝下，在支持ES7裝飾器的環境中，能夠直接經過@withRouter，還能在props上獲取別的對象 const { match, location, history } = this.props

                        

                       location.query屬性沒有了，如今經過 'query-string' 模塊進行轉換獲取

                       

            4.頁面離開，路由變化的時候的提示功能 Prompt 組件  https://reacttraining.com/react-router/core/api/Prompt

                      原來的是這個樣子的    

                            這個寫法有不少種，項目中採用的例子1中的代碼，在Route組件中設置onChange時間進行處理，可是維護性上面的確有點問題

                                  a.離開檢測的添加 和 業務store比較遠，不利於管理，固然能夠經過全局store處理下

                                  b.離開檢測，還須要判斷下當前路由是否是符合當前store的路由， 再進行離開數據變化判斷，實現比較醜

                     如今的樣子

　　　　          　

                            問題  a. 原始的沒找到支持Promise對象的方式， 通常提示都是異步的，根據用戶點的進行操做不一樣的操做

                                     b. 原來的業務都是在Promise成功後，進行變化標誌位重置，如今不支持，標誌重置就須要在組件componentWillUnmount，componentWillReceiveProps中進行處理

　　                     固然也能夠這樣寫，因爲項目採用的mobx-react作的狀態管理，因此，上面的方式可以減小組件的依賴，減小render

                            

 

              5.matchPath 方法，頁面菜單選中，經過 matchPath 進行判斷，固然本身處理也能夠

             

            6.hashHistory對象的建立

                  

                  HashRouter 能夠本身定義 getUserConfirmation，應該就是history模塊的 getUserConfirmation

                  下面的代碼是讓push，replace 支持params， 原來並不支持，致使 search字符串會很長，代碼很難維護

                  單首創建hashHistory對象，帶來的好處是，

                          在一些store須要跳轉的地方，原來是經過 import { hashHistory } from 'react-router'; 獲取的，直接 hashHistory.push()

                          4.0中沒有了，須要經過location.history獲取，這樣就會要改不少，須要location傳入store,而且對應的組件大部分須要withRouter， 來獲取location  

                         這樣處理的話，就只須要在頁面import語句進行下修改  import hashHistory from 'COMPONENTS/hashHistory.js';