如果你已经是一个正在开发中的react应用，想要引入更好的管理路由功能。那么，react-router是你最好的选择~
react-router版本现今已经到4.0.0了，而上一个稳定版本还是2.8.1。相信我，如果你的项目中已经在使用react-router之前的版本，那一定要慎重的更新，因为新的版本是一次非常大的改动，如果你要更新，工作量并不小。
这篇文章不讨论版本的变化，只是讨论一下React-router4.0的用法和源码。
源码在这里：https://github.com/ReactTraining/react-router
1.准备
只需要在你的react app中引入一个包yarn add react-router-dom@next
注:react-router-dom是对react-router的作了一些小升级的库，代码基于react-router
2.使用
我们直接上例子：
import React from 'react' import {BrowserRouter as Router,Route,Link} from 'react-router-dom' const Basic = () => ( <Router> <div> <ul> <li><Link to="https://www.jb51.net/">Home</Link></li> <li><Link to="/page1">Page1</Link></li> <li><Link to="/page2">Page2</Link></li> </ul> <hr/> <Route exact path="https://www.jb51.net/" component={Home}/> <Route path="/page1" component={Page1}/> <Route path="/page2" component={Page2}/> </div> </Router> )
跟之前的版本一样，Router这个组件还是一个容器，但是它的角色变了，4.0的Router下面可以放任意标签了，这意味着使用方式的转变，它更像redux中的provider了。通过上面的例子相信你也可以看到具体的变化。而真正的路由通过Route来定义。Link标签目前看来也没什么变化，依然可以理解为a标签，点击会改变浏览器Url的hash值，通过Route标签来捕获这个url并返回component属性中定义的组件，你可能注意到在为"https://www.jb51.net/"写的路由中有一个exact关键字，这个关键字是将"https://www.jb51.net/"做唯一匹配，否则"https://www.jb51.net/"和"/xxx"都会匹配到path为"https://www.jb51.net/"的路由，制定exact后，"/page1"就不会再匹配到"https://www.jb51.net/"了。如果你不懂，动手试一下~
通过Route路由的组件，可以拿到一个match参数，这个参数是一个对象，其中包含几个数据：
isExact：刚才已经说过这个关键字，表示是为作全等匹配
params:path中包含的一些额外数据
path:Route组件path属性的值
url:实际url的hash值
我们来实现一下刚才的Page2组件：
const Page2 = ({ match }) => ( <div> <h2>Page2</h2> <ul> <li> <Link to={`${match.url}/branch1`}> branch1 </Link> </li> <li> <Link to={`${match.url}/branch2`}> branch2 </Link> </li> <li> <Link to={`${match.url}/branch3`}> branch3 </Link> </li> </ul> <Route path={`${match.url}/:branchId`} component={Branch} /> <Route exact path={match.url} render={() => ( <h3>Default Information</h3> )} /> </div> ) const Branch = ({ match }) => { console.log(match); return ( <div> <h3>{match.params.branchId}</h3> </div> ) }
很简单，动手试一试。需要注意的就只有Route的path中冒号":"后的部分相当于通配符，而匹配到的url将会把匹配的部分作为match.param中的属性传递给组件，属性名就是冒号后的字符串。
3.Router标签
细心的朋友肯定注意到了上面的例子中我import的Router是BrowserRouter，这是什么东西呢？如果你用过老版本的react-router，你一定知道history。history是用来兼容不同浏览器或者环境下的历史记录管理的，当我跳转或者点击浏览器的后退按钮时，history就必须记录这些变化，而之前的react-router将history分为三类。
hashHistory 老版本浏览器的history
browserHistory h5的history
memoryHistory node环境下的history，存储在memory中
4.0之前版本的react-router针对三者分别实现了createHashHistory、createBrowserHistory和create MemoryHistory三个方法来创建三种情况下的history，这里就不讨论他们不同的处理方式了，好奇的可以去了解一下~
到了4.0版本，在react-router-dom中直接将这三种history作了内置，于是我们看到了BrowserRouter、HashRouter、MemoryRouter这三种Router，当然，你依然可以使用React-router中的Router，然后自己通过createHistory来创建history来传入。
react-router的history库依然使用的是 https://github.com/ReactTraining/history
4.Route标签
在例子中你可能注意到了Route的几个prop
exact: propType.bool
path: propType.string
component: propType.func
render: propType.func
他们都不是必填项，注意，如果path没有赋值，那么此Route就是默认渲染的。
Route的作用就是当url和Route中path属性的值匹配时，就渲染component中的组件或者render中的内容。
当然，Route其实还有几个属性，比如location，strict,chilren 希望你们自己去了解一下。