概述
看完本文后你能了解到：
（1）Router和route的關(guān)系
（2）如何通過js和標(biāo)簽控制路由跳轉(zhuǎn)和傳遞參數(shù)
（3）history對象push和replace的區(qū)別及其他函數(shù)的用法
（4）location對象里的變量及其獲取方法
本文參考鏈接初探 React Router 4.0，想進(jìn)一步了解的小伙伴可以移步這里。
沒事多逛逛文檔也是極好的
Router和Route
react-router主要是用于Url跳轉(zhuǎn)，其核心概念即為Router和Route。
Router相當(dāng)于一個容器，用于包裹Route，一個Route即為一個Url。Route里面會包裹一個組件。當(dāng)在瀏覽器里輸入Url時，就會跳轉(zhuǎn)到相應(yīng)的Route并顯示相關(guān)組件。
一個Router里面可以包含多個Route的偽代碼為：
<Router>
<div>
<Route />
<Route />
<Route />
</div
<Router>
這里需要包裹一個div，因為Router要求子組件只能有一個。
Router和History有三個種類型：
（1）HashHistory和HashRouter
（2）BrowerHistory和BrowerRouter
（3）createMemoryHistory和MemoryRouter
BrowerHistory和HashHistory主要區(qū)別在于Url格式：
使用hashHistory,瀏覽器的url是這樣的：/#/user/liuna?_k=adseis
使用browserHistory,瀏覽器的url是這樣的：/user/liuna
這樣看起來當(dāng)然是browerHistory更好一些，但是它需要server端支持。
使用hashHistory時，因為有 # 的存在，瀏覽器不會發(fā)送request，react-router 自己根據(jù) url 去 render 相應(yīng)的模塊。
【相關(guān)連接】
react router為什么推薦使用browserHistory而不推薦hashHistory？
hashHistory 和 browserHistory 的區(qū)別
標(biāo)簽控制和Js控制
我們在進(jìn)行路由跳轉(zhuǎn)時，有兩種方法，第一種是通過標(biāo)簽來完成跳轉(zhuǎn)動作，例如
{/*只渲染出第一個與當(dāng)前訪問地址匹配的 <Route> 或 <Redirect>。 */}
<Switch>
{/* 用了Switch 這里每次只匹配一個路由，所有只有一個節(jié)點。 */}
<Route/>
<Route/>
</Switch>
{/*Link 最簡單的跳轉(zhuǎn)，直接跳轉(zhuǎn)到相應(yīng)路徑下并顯示組件 */}
<Link to={to} {...rest} />
{/*渲染時將導(dǎo)航到一個新地址，這個新地址覆蓋在訪問歷史信息里面的本該訪問的那個地址 */}
<Redirect to={to} {...rest} />
還有一種方式就是通過對象來控制路由跳轉(zhuǎn)，即Js代碼控制，例如
使用history對象即可完成路由跳轉(zhuǎn)
History對象使用
在不同的 javascript 環(huán)境中， history 以多種能夠行駛實現(xiàn)了對會話（session）歷史的管理。
history 對象通常具有以下屬性和方法：
Location對象
location對象包含了當(dāng)前位置的相關(guān)信息，而且location是不會發(fā)生改變的，因此可以在生命周期的回調(diào)函數(shù)中使用location對象來查看當(dāng)前頁面的訪問地址是否發(fā)生改變。
實例
至此為止，我們對react-router的概念進(jìn)行了簡單梳理，更多詳細(xì)的內(nèi)容可以移步本文參考文章，里面有更多詳細(xì)的介紹。本文的側(cè)重點是還是想通過demo來演示react-router的運行
本demo包含了如下的幾個功能點
【1】part1調(diào)轉(zhuǎn)傳遞參數(shù)
【2】part2 historty push和replace
【3】part3 url傳值
本demo是基于react-router 4.0的，用于基本的react-router學(xué)習(xí)，
同時，可以參考React Router頁面?zhèn)髦档娜N方法，不過此版本貌似不是基于react-router4.0的，存在一些問題，在調(diào)試的時候可以把程序的this.props打印出來，在控制臺里查看。
