关键词：
react-router 4.0 出来好9了，项目在4月份的时候对react-router进行了升级，升级耗费了3天，一个坑一个坑踩了过来。
按照公司项目情况说下升级改了哪些，项目使用的是hashHistory，（BrowserHistory 的情况就不清楚了）
中文文档 https://reacttraining.cn/ 好像https签名出问题了，打不开，可以 gtihub项目 下载在，npm 安装 start下
1. package.json 配置修改
"react-router": "4.1.1",
"react-router-dom": "4.1.1",
2. Router.jsx 修改
原来的是这个样子的
现在的样子
a.文档中比较多的例子直接使用 HashRouter 对象，但是在使用的时候有些问题，见下面介绍，所以用了<Router history={hashHistory}>，是自己创建的一个history模块https://github.com/ReactTraining/history的实例hashHistory
b.Switch 组件，Route组件
Route组件的exact 属性--------要求路径与location.pathname必须 完全 匹配，在项目中有exact==false情况是，路由里面嵌套了子路由切换逻辑https://reacttraining.com/react-router/web/api/Route/exact-bool
3.loctaion对象获取与withRouter https://reacttraining.com/react-router/web/api/withRouter
原来的是这个样子的
原来都是在顶层 Route 的 设置的component 组件往下面传递的, withRouter 也可以的2.0已经有了
现在的样子
通过withRouter函数包装下，在支持ES7装饰器的环境中，可以直接通过@withRouter，还能在props上获取别的对象 const { match, location, history } = this.props
location.query属性没有了，现在通过 'query-string' 模块进行转换获取
4.页面离开，路由变化的时候的提示功能 Prompt 组件 https://reacttraining.com/react-router/core/api/Prompt
原来的是这个样子的
这个写法有很多种，项目中采用的例子1中的代码，在Route组件中设置onChange时间进行处理，但是维护性上面的确有点问题
a.离开检测的添加 和 业务store比较远，不利于管理，当然可以通过全局store处理下
b.离开检测，还需要判断下当前路由是不是符合当前store的路由， 再进行离开数据变化判断，实现比较丑
现在的样子
问题 a. 原始的没找到支持Promise对象的方式， 一般提示都是异步的，根据用户点的进行操作不同的操作
b. 原来的业务都是在Promise成功后，进行变化标志位重置，现在不支持，标志重置就需要在组件componentWillUnmount，componentWillReceiveProps中进行处理
当然也可以这样写，由于项目采用的mobx-react做的状态管理，所以，上面的方式能够减少组件的依赖，减少render
5.matchPath 方法，页面菜单选中，通过 matchPath 进行判断，当然自己处理也可以
6.hashHistory对象的创建
HashRouter 可以自己定义 getUserConfirmation，应该就是history模块的 getUserConfirmation
下面的代码是让push，replace 支持params， 原来并不支持，导致 search字符串会很长，代码很难维护
单独创建hashHistory对象，带来的好处是，
在一些store需要跳转的地方，原来是通过 import { hashHistory } from 'react-router'; 获取的，直接 hashHistory.push()
4.0中没有了，需要通过location.history获取，这样就会要改很多，需要location传入store,并且对应的组件大部分需要withRouter， 来获取location
react-router4.0版本使用笔记
react-router4变化还是挺大的，看网上很多人遇到问题，都是基本用法的改变，所以这里记录一下。http://www.jianshu.com/p/d6727e8d81c41.react-router4.0升级不少内容，详细可看官网https://reacttraining.com/react-router/web/api/Route/Route-render-methods2.安... 查看详情
react-router4.0history报错
react-router更新到了4.0，很多API已经不一样了。history被纳入了react-router-dom文件下的HashRouter、BrowserRouter等。使用4.0版到react-router网站了解下新API，或者仍想按原来方式，可以安装旧版的react-router。这两天准备用react写个新项目... 查看详情
react-router4.0踩到的坑
接手的项目需要二次开发，项目是使用的react+react-router4.0+antd+redux来开发的，由于之前用的是react-router2.0，react-router2.0和4.0之间变化还是挺多的，在这里记录一下踩到遇到的问题1.dom组件不再在react-router中引入，而是在react-router-d... 查看详情
react-router4.0学习笔记
1、安装react-router-dom 2、页面上要使用的时候要引入 import{BrowserRouterasRouter,Route,Link}from‘react-router-dom‘3、使用的时候要在外层包一个<Router> 4、 查看详情
react-router@4.0使用和源码解析
...发中的react应用，想要引入更好的管理路由功能。那么，react-router是你最好的选择~react-router版本现今已经到4.0.0了，而上一个稳定版本还是2.8.1。相信我，如果你的项目中已经在使用react-router之前的版本，那一定要慎重的更新，... 查看详情
react-router 4.0、react-router-dom 和 react-router-redux 有啥区别？
】react-router4.0、react-router-dom和react-router-redux有啥区别？【英文标题】：Whatisdifferencebetweenreact-router4.0,react-router-domandreact-router-redux?react-router4.0、react-router-dom和react-router-redux有什么区别？【发布时间】：2017-08-2808:30 查看详情
升级 React-Router 并用 browserHistory 替换 hashHistory
】升级React-Router并用browserHistory替换hashHistory【英文标题】：UpgradingReact-RouterandreplacinghashHistorywithbrowserHistory【发布时间】：2016-09-1805:24:19【问题描述】：我有一个使用react-router1.x和hashHistory的bootstrap+react主题，我想删除散列，所... 查看详情
react-router升级与Router冲突
】react-router升级与Router冲突【英文标题】：react-routerupgradingconflictwithRouter【发布时间】：2016-08-2908:43:16【问题描述】：我看过升级指南here如何使用withRouter，但在我的项目中实施它时遇到问题。我的connect有问题。当我在withRouter... 查看详情
如何从 react-router 升级到 react-router-dom？
】如何从react-router升级到react-router-dom？【英文标题】：Howtoupgradefromreact-routertoreact-router-dom?【发布时间】：2017-09-2621:16:56【问题描述】：如果我想从"react-router":"^2.0.0"升级到"react-router":"^4.0.0",&qu 查看详情
react-router路由4.0版本用法(代码片段)
第一步：引包两个命令：cnpmi-Sreact-routerreact-router-dom 第二步：用路由管理APP页面1.创建主路由管理页面，在这里使用了路由嵌套1importReact,Componentfrom‘react‘;2importRoute,BrowserRouterfrom‘react-router-dom‘3importAppfrom‘../App‘4importSubRo... 查看详情
react-router介绍及使用
参考技术AReact-Router4.0版本之前安装React-Router4.0版本之后安装在React-Router4.0开始，官方提供一个基础的路由react-router。目前使用的版本获取path的参数Route里面component和render这两个属性的使用：<Link/>里面的to属性是一个对象，... 查看详情
ble蓝牙协议栈开发
1.由浅入深，蓝牙4.0/BLE协议栈开发攻略大全（1）2.由浅入深，蓝牙4.0/BLE协议栈开发攻略大全（2）3.由浅入深，蓝牙4.0/BLE协议栈开发攻略大全（3） 查看详情
react-router从v3版本升到v4版本，升级小记
react-routerv4跟react一样拆成了两部分，核心的react-router和依运行环境而定的react-router-dom或react-router-native（跟react-dom和react-native一样）。本文要说的是浏览器环境，也就是react-router+react-router-dom。组件外导航与react-router-redux之前我... 查看详情
react-router4.0这个路由怎么配置
无线路由器就是带有无线覆盖功能的路由器，它主要应用于用户上网和无线覆盖。市场上流行的无线路由器一般都支持专线xdsl/cable，动态xdsl，pptp四种接入方式，它还具有其它一些网络管理的功能，如dhcp服务、nat防火墙、mac地... 查看详情
flutter升级空安全攻略
参考技术A1、升级依赖的插件版本pubspec.yaml（包括example），pubget解决依赖冲突2、pubspec.yaml所在路径下执行dartpubupgrade--null-safety检查是否所在flutter工程依赖库是否都升级到了空安全版本example示例需要进入example路径下检查1、List默... 查看详情
博客园积分与排名升级攻略（转）
博客园积分算法探讨今天在dudu的《博客园FAQ》上看到了博客积分算法规则。因为同样是搞互联网的，平时工作也涉及到用户积分算法的设计，所以特把此问题拿出来分析探讨。初衷只是纯学术的研究探讨，并不构成对博客园积... 查看详情
kindedito从3.51升级到4.0版本流程怎么升级？
KindEdito从3.51升级到4.0版本流程怎么升级？，是需要修改那些地方，老版本正常使用。官网的升级有点看不明白。本站是php的，知道的帮忙帮忙，说说详细步骤，成功还有重谢！参考技术A你可以去看看这片神奇的帖子。。所以说... 查看详情
蓝牙4.0的模块可以升级为蓝牙5.0模块吗？
...牙5.0模块的芯片和蓝牙4.0芯片都不一样，是没有办法直接升级的。蓝牙4.2模块SKB369除了支持4.2，还能支持5.0（固件升级），注意，是支持5.0的固件，这就需要工程师在出厂烧录软件的时候确认好，是要出4.2的还是要5.0的，出厂之... 查看详情