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