完美結合 Redux 與 React-router (react-router不切換頁面)

本文能夠解答如下問題:

• 連接 redux 後 react-router 不切換頁面
• react-router 路由改變頁面卻不改變
• redux 與 react-router 結合使用的方案

簡單的問題我多說兩句。
先解決問題: react-router 文檔的最後一個 API withRouter。在 connect 組建外面再包裹一層 withRouter。
推薦你接着往下看。
若是把 redux 連接到 Switch 或者 NavLink 以及他們的父組件，會產生一個問題: 路由不會切換頁面了，或者 activeStyle 不工做了。react-router 4.x 的使用更加靈活，在 Route 外面綁定智能組件再正常不過，切換不了頁面感受有點尷尬，關鍵是:和我想的不同啊!
第一反應就是 react-router-redux。
redux 管理狀態，react-router 本質上也就是單頁應用的一個狀態而已，只不過和 H5 的 history API 聯繫到了一塊兒，邏輯上 router 應該就是 redux的store 裏的一個狀態而已，歸 redux 管理十分正常。看了看 react-router-redux 的源碼，只是利用 history 的 API 修改路由，還有監聽路由的變化修改 store。並無什麼魔法，沒有解決個人問題。
去 react-router 文檔瞅一眼，最後一個 API 藏在角落當時看文檔時候一掠而過根本沒注意到。withRouter。
原來是這麼回事 redux 的 connect 方法重寫了組件的 shouldComponentUpdate 方法，致使不能響應 location 的變化而從新渲染組件。withRouter 寫在 connect 外面，withRouter 的 shouldComponentUpdate 不會被重寫，組件會成功的從新渲染。
問題到此爲止解決了，那 react-router-redux 是否是二者結合使用的最佳或者合理的方案麼？
我以爲大多數狀況下不須要 react-router-redux。
包裹 withRouter 後路由信息能夠經過組件 props 得到，還能夠經過 history 操控路由獲取路由。能夠說 react-router 4.x 引入 H5 的 history 後，把路由信息放到 store 裏顯得毫無必要。
而引入的好處是，對單頁應用而言，邏輯上路由確實應該是應用狀態的一部分(我的理解)。對須要頻繁和在多處操做路由進行深度時光穿梭的應用，他提供了操做的方便性。除此以外，我的認爲無必要性。