環(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組件)欢瞪。其他的官方不建議活烙,反正我是不會去用。