前端項目升級到React-router5中遇到的問題解決方案以及思路


我胡漢三有日子沒回來寫寫文章了,最近一直再忙着將老項目升級,所以沒時間來搞文章,今天突然感覺開了掛一樣,愛因斯坦附體,把之前的bug都搞定了,在這里特意把升級中遇到的問題,記錄下來,算是把這個坑填上。

 

 

場景:react-router2.2.4 ---> 5.0.1

主要發生了兩個問題:

  1.路由跳轉之前用了browserHistory.push()     拋錯:Cannot read property 'push' of undefined

  2.react-router中的Link組件       拋錯:type is invalid

 

問題一的解決與思考:

  解決方案:使用this.props.history.push()

  出現原因:react-router5.0.1已經不存在browserHistory這個對象

  解決思路:1.當拋出錯誤后,打了debugger,結果:發現browserHistory是undefined

       2.將 import {browserHistory} from 'react-router'  改為 import * as Rtest from 'react-router',並在后面打印出Rtest,結果:發現Rtest 中並沒有browserHistory對象

       在此已經懷疑是版本問題,因為給react-router升級到了5.0.1

       3.翻看之前的版本(2.2.4),發現存在browserHistory,確定問題:問題為react-router版本升級導致之前的寫法出現錯誤

 

問題二的解決與思考

  解決方案:從react-router-dom中引入,inport {Link} from 'react-router-dom'

  出現原因:Link組件被從react-router移動到了react-router-dom中

  解決思路:1.找到Link組件,發現Link組件的使用沒問題,看了拋錯,結果:Link組件不存在

       2.本想直接刪除掉Link組件,自己手動實現一個,后查了一下發現Link組件被移入了react-router-dom中。

 

總結:看了一下,react-router后來的版本和之前的版本區別還是蠻大的,升級的話,基本上大部分地方都需要動一動,但是改起來還是很便捷的。

好了,今天就記錄到這。我胡漢三看文檔去了,告辭!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM