React Router 升級到 V4

環(huán)境: React + Electron + Cordova?

操作系統(tǒng): Mac OS

背景:

項(xiàng)目基于React實(shí)現(xiàn)業(yè)務(wù)邏輯,通過Cordova打包成不同平臺的移動App启昧,通過Electron在模擬瀏覽叙凡。

升級步驟我會參考文檔:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md

后來發(fā)現(xiàn)一篇譯文:https://github.com/YutHelloWorld/Blog/issues/4

升級按照步驟處理簡單,但是密末,處理完不報(bào)錯握爷,路由卻不跳轉(zhuǎn)!Q侠铩P绿洹!

開始使用的是 BrowserRouter

?在控制臺敲了下 document.location刹碾,看到結(jié)果是:file:///Users/xxx/Project/index.html格式燥撞。

思考了一會明白了:通過Electron其實(shí)就是訪問本地文件,就類似服務(wù)器端Web服務(wù)器訪問本地文件一樣,所以這個地方應(yīng)該使用處理靜態(tài)文件路由物舒,根據(jù)官方介紹色洞,HashRouter,MemoryRouter冠胯,StaticRouter 三個都可以處理靜態(tài)文件火诸,再繼續(xù)看,StaticRouter 主要是用在服務(wù)器處理302跳轉(zhuǎn)這一類的問題涵叮,所以暫時(shí)剔除惭蹂,剩下的看來都可以使用,就選擇使用MemoryRouter割粮,替換完畢盾碗,運(yùn)行查看,GoodRㄆ啊M⒀拧!京髓,搞定航缀,可以跳轉(zhuǎn),加載也正確堰怨。


你以為真的好了芥玉,太天真!1竿肌灿巧!

靜態(tài)跳轉(zhuǎn)是沒問題了,我要動態(tài)history.push()進(jìn)行跳轉(zhuǎn)呢揽涮,怎么辦抠藕。

官方說之前的 History模塊拿出來了,需要單獨(dú)安裝使用:https://github.com/ReactTraining/history


那就做唄蒋困,做完了使用時(shí)還是不對6芩啤!雪标!啥子情況零院?

拉出來源代碼看看唄:

看來已經(jīng)內(nèi)置了,所以就不用在外面?zhèn)髁舜迮伲苯佑冒擅欧啵〔恍校∨肜В∧貌坏剑趺崔k乾吻?看看官方怎么說的髓梅,要用withRouter把你的組件包裝起來拟蜻,這樣子你才能使用,OK枯饿。


經(jīng)過這些折騰總算能用了酝锅,但是我要在狀態(tài)組件中使用怎么辦?狀態(tài)組件可沒有路由奢方?

而且這里面的History是內(nèi)置的搔扁,我再新建一個History push路由是不會起作用的(我已經(jīng)試過了),怎么辦蟋字?不用現(xiàn)成的路由了稿蹲,看看MemoryRouter怎么實(shí)現(xiàn)的,我們直接使用

< Router history={history}? />

將history封裝一下:


調(diào)整路由:


這次真的好了鹊奖。

總結(jié)一下吧苛聘,算是沒白折騰:

在React Router V4里面路由,幾種路由的介紹:http://reacttraining.cn/web/guides/quick-start忠聚,我就不貼了设哗。

除了Router這個最底層的路由組件其他的都是History內(nèi)置,直接使用就行两蟀,不過這也產(chǎn)生了一問題网梢,就是在路由涉及不到的組件內(nèi)部跳轉(zhuǎn)沒辦法處理,要想使用History跳轉(zhuǎn)就必須要使用withRouter返回路由字組件赂毯,但是在狀態(tài)處理組件內(nèi)部這是不可能的战虏,所以這種情況要么使用 Router + History(根據(jù)情況調(diào)用不同的Create方法),要么就傳遞History作為參數(shù)到狀態(tài)組件(Store組件)欢瞪。其他的官方不建議活烙,反正我是不會去用。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遣鼓,一起剝皮案震驚了整個濱河市啸盏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌骑祟,老刑警劉巖回懦,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異次企,居然都是意外死亡怯晕,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進(jìn)店門缸棵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舟茶,“玉大人,你說我怎么就攤上這事“闪梗” “怎么了隧出?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長阀捅。 經(jīng)常有香客問我胀瞪,道長,這世上最難降的妖魔是什么饲鄙? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任凄诞,我火速辦了婚禮,結(jié)果婚禮上忍级,老公的妹妹穿的比我還像新娘帆谍。我一直安慰自己,他們只是感情好颤练,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布既忆。 她就那樣靜靜地躺著,像睡著了一般嗦玖。 火紅的嫁衣襯著肌膚如雪患雇。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天宇挫,我揣著相機(jī)與錄音苛吱,去河邊找鬼。 笑死器瘪,一個胖子當(dāng)著我的面吹牛翠储,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播橡疼,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼援所,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了欣除?” 一聲冷哼從身側(cè)響起住拭,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎历帚,沒想到半個月后滔岳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挽牢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年谱煤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片禽拔。...
    茶點(diǎn)故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡刘离,死狀恐怖室叉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情硫惕,我是刑警寧澤太惠,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站疲憋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏梁只。R本人自食惡果不足惜缚柳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望搪锣。 院中可真熱鬧秋忙,春花似錦、人聲如沸构舟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狗超。三九已至弹澎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間努咐,已是汗流浹背苦蒿。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留渗稍,地道東北人佩迟。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像竿屹,于是被迫代替她去往敵國和親报强。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容