1. 程式人生 > >前端專案升級到React-router5中遇到的問題解決方案以及思路

前端專案升級到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後來的版本和之前的版本區別還是蠻大的,升級的話,基本上大部分地方都需要動一動,但是改起來還是很便捷的。

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

&n