如果你已經是一個正在開發中的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> )}