深入理解react-router@4.0 使用和源码解析

如果你已经是一个正在开发中的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="/">Home</Link></li>  <li><Link to="/page1">Page1</Link></li>  <li><Link to="/page2">Page2</Link></li>  </ul>  <hr/>  <Route exact path="/" 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属性中定义的组件，你可能注意到在为"/"写的路由中有一个exact关键字，这个关键字是将"/"做唯一匹配，否则"/"和"/xxx"都会匹配到path为"/"的路由，制定exact后，"/page1"就不会再匹配到"/"了。如果你不懂，动手试一下~

通过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> )}