环境: React + Electron + Cordova
操作系统: Mac OS
背景:
项目基于React实现业务逻辑,通过Cordova打包成不同平台的移动App,通过Electron在模拟浏览。
升级步骤我会参考文档:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md
后来发现一篇译文:https://github.com/YutHelloWorld/Blog/issues/4
升级按照步骤处理简单,但是,处理完不报错,路由却不跳转!!!!
开始使用的是 BrowserRouter
在控制台敲了下 document.location,看到结果是:file:///Users/xxx/Project/index.html格式。
思考了一会明白了:通过Electron其实就是访问本地文件,就类似服务器端Web服务器访问本地文件一样,所以这个地方应该使用处理静态文件路由,根据官方介绍,HashRouter,MemoryRouter,StaticRouter 三个都可以处理静态文件,再继续看,StaticRouter 主要是用在服务器处理302跳转这一类的问题,所以暂时剔除,剩下的看来都可以使用,就选择使用MemoryRouter,替换完毕,运行查看,Good!!!,搞定,可以跳转,加载也正确。
你以为真的好了,太天真!!!
静态跳转是没问题了,我要动态history.push()进行跳转呢,怎么办。
官方说之前的 History模块拿出来了,需要单独安装使用:https://github.com/ReactTraining/history
那就做呗,做完了使用时还是不对!!!啥子情况?
拉出来源代码看看呗:
看来已经内置了,所以就不用在外面传了,直接用吧!不行!!拿不到,怎么办?看看官方怎么说的,要用withRouter把你的组件包装起来,这样子你才能使用,OK。
经过这些折腾总算能用了,但是我要在状态组件中使用怎么办?状态组件可没有路由?
而且这里面的History是内置的,我再新建一个History push路由是不会起作用的(我已经试过了),怎么办?不用现成的路由了,看看MemoryRouter怎么实现的,我们直接使用
< Router history={history} />
将history封装一下:
调整路由:
这次真的好了。
总结一下吧,算是没白折腾:
在React Router V4里面路由,几种路由的介绍:http://reacttraining.cn/web/guides/quick-start,我就不贴了。
除了Router这个最底层的路由组件其他的都是History内置,直接使用就行,不过这也产生了一问题,就是在路由涉及不到的组件内部跳转没办法处理,要想使用History跳转就必须要使用withRouter返回路由字组件,但是在状态处理组件内部这是不可能的,所以这种情况要么使用 Router + History(根据情况调用不同的Create方法),要么就传递History作为参数到状态组件(Store组件)。其他的官方不建议,反正我是不会去用。