距离React Router v4 正式发布也已经过去三个月了，这周把一个React的架子做了升级，之前的路由用的还是v2.7.0版的，所以决定把路由也升级下，正好“尝尝鲜”...
江湖传言，目前官方同时维护 2.x 和 4.x 两个版本。（ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦，此刻相信机智如我的你也会发现，ReactRouter v3 去哪儿了？整丢了？？巴拉出锅了？？？敢不敢给我个完美的解释！？）事实上 3.x 版本相比于 2.x 并没有引入任何新的特性，只是将 2.x 版本中部分废弃 API 的 warning 移除掉而已。按照规划，没有历史包袱的新项目想要使用稳定版的 ReactRouter 时，应该使用 ReactRouter 3.x。目前 3.x 版本也还处于 beta 阶段，不过会先于 4.x 版本正式发布。如果你已经在使用 2.x 的版本，那么升级 3.x 将不会有任何额外的代码变动。
礼貌性简介下
React Router V4 相较于前面三个版本有根本性变化，首先是遵循 Just Component 的 API 设计理念，其次API方面也精简了不少，对新手来说降低了学习难度，但如果是对之前项目的重构，嗯，简直无**可说。本次升级的主要特点如下：
声明式（Declarative）
可组合 （Composability）
React Router V4 遵循了 React 的理念： 万物皆组件 。因此 升级之后的 Route、Link、Switch等都是一个普通的组件。
React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括：
react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
react-router-native 用于 React Native 的 React Router
react-router-redux React Router 和 Redux 的集成
react-router-config 静态路由配置帮助助手
插件初引入
通常我们在 React 的使用中，一般要引入两个包， react 和 react-dom ，那么 react-router 和 react-router-dom 是不是两个都要引用呢？ 注意，前方高能，入门第一坑就在这里 。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然，如果搭配 redux ，你还需要使用 react-router-redux 。
主要组件简介
在4.0之前版本的 API 中， <Router> 组件的 children 只能是 React Router 提供的各种组件，如 <Route>、<IndexRoute>、<Redirect> 等。而在 React Router 4 中，你可以将各种组件及标签放进 <Router> 组件中，他的角色也更像是 Redux 中的 <Provider> 。**不同的是 <Provider> 是用来保持与 store 的更新，而 <Router> 是用来保持与 location 的同步。**示例如下：
// 示例1 <Router> <div> <ul> <li><Link to="https://www.jb51.net/">首页</Link></li> <li><Link to="/about">关于</Link></li> <li><Link to="/topics">主题列表</Link></li> </ul> <hr/> <Route exact path="https://www.jb51.net/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </div> </Router>
Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：
<BrowserRouter> ：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
<HashRouter> ：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
<MemoryRouter> ：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；
<NativeRouter> ：为使用React Native提供路由支持；
<StaticRouter> ：从不会改变地址；
TIPS：算是第二坑吧，和之前的Router不一样，这里 <Router> 组件下只允许存在一个子元素，如存在多个则会报错。
反面典型在这里：
<Router> <ul> <li><Link to="https://www.jb51.net/">首页</Link></li> <li><Link to="/about">关于</Link></li> <li><Link to="/topics">主题列表</Link></li> </ul> <hr/> <Route exact path="https://www.jb51.net/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </Router>
没错，示例2在没有 <div> 爸爸的保护下，会报如下异常信息：
我们知道，Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。示例如下：