分析：React-Router路由跳轉時觸發兩次render的情況

問題：React-Router路由跳轉時，render觸發兩次，導致頁面重複渲染。

原因：專案中使用的react-router ^3.x.x。 react-router路由跳轉時，this.props.location.action的值會有兩種狀態。這兩種狀態都會觸發render。故頁面渲染兩次。

　　   1、點擊Link時，this.props.location.action=PUSH，2、當瀏覽器前進後退時，this.props.location.action=POP。

　　   所以點擊了Link時，狀態先是PUSH，之後瀏覽器發生前進後退，狀態變成POP。

解決方案：在路由層，使用react週期函數 shouldComponentUpdate（生命週期不熟悉的同學請另查資料） 進行 this.props.location.action值得判斷。根據項目實際需要判斷值是PUSH，或是POP。

　　　　　本人選擇的是POP，因為專案中有些需求要使用到 window.location.hash='xxxxxxxx',這種情況PUSH是觸發不到的，所以路由跳轉會失敗。

1 shouldComponentUpdate() {2         // POP 浏览器前进后退， PUSH 点击Link3         return this.props.location.action === "POP"4 }

備註：facebook官方說此情況是 react-router 的BUG，已經在 ^4.x.x中修復了。

　　   以上內容均是本人在實際專案開發中所遇所得，每個人所遇BUG不同，請大神輕噴。謝謝！ 

以上是分析：React-Router路由跳轉時觸發兩次render的情況的詳細內容。更多資訊請關注PHP中文網其他相關文章！