React Router 升级到 V4

环境： 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组件）。其他的官方不建议，反正我是不会去用。