react-router3.x hashHistory render兩次的bug,及解決方案

先寫一個簡單App頁面，其實就是簡單修改了react-router的官方例子中的animations例子，修改了兩個地方:

1.路由方式由browserHistory修改為hashHistory

2.在Page1組件中打印console.log('render page1');

直接上代碼：

 

然后現在點擊Page1鏈接,會發現render page1 被打印了兩次，說明，Page1組件被渲染了兩次，假如Page1組件比較復雜的話，豈不是很影響性能；

為了仔細研究為什么會render兩次，下面把Page1組件稍微改造一下如下,記錄兩次render的時候Page1的props：

再次點擊Page1鏈接，打印出來了，兩次的props；唯一的區別就在this.props.location.action的值，第一次位PUSH,第二次為POP

查閱了很多的文章和資料，想弄明白PUSH和POP的區別和聯系,有一篇文章講解的react-router內部原理，可以看一下深入理解react-router路由系統,可以參考一下，里面說

action, // location 類型，在點擊 Link 時為 PUSH，瀏覽器前進后退時為 POP，調用 replaceState 方法時為 REPLACE

我在react-router的github issues上提出了這個問題，官方直接說這是3.x版本的BUG,react-router4.x的版本已經修復了這個問題，也不再深究為什么會出現這個問題，直接說目前的解決方案：

在容器組件的shouldComponentUpdate方法中添加一行代碼：return (this.props.router.location.action === 'PUSH');

再次點擊page1鏈接，只會渲染一次，修改之后完整的代碼如下：