概述
看完本文后你能了解到：
（1）Router和route的關(guān)系
（2）如何通過js和標簽控制路由跳轉(zhuǎn)和傳遞參數(shù)
（3）history對象push和replace的區(qū)別及其他函數(shù)的用法
（4）location對象里的變量及其獲取方法
本文參考鏈接初探 React Router 4.0，想進一步了解的小伙伴可以移步這里。
沒事多逛逛文檔也是極好的
Router和Route
react-router主要是用于Url跳轉(zhuǎn)，其核心概念即為Router和Route傻唾。
Router相當于一個容器谁撼，用于包裹Route柿究，一個Route即為一個Url摊鸡。Route里面會包裹一個組件。當在瀏覽器里輸入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
這樣看起來當然是browerHistory更好一些，但是它需要server端支持厌殉。
使用hashHistory時食绿，因為有 # 的存在，瀏覽器不會發(fā)送request公罕，react-router 自己根據(jù) url 去 render 相應(yīng)的模塊器紧。
【相關(guān)連接】
react router為什么推薦使用browserHistory而不推薦hashHistory？
hashHistory 和 browserHistory 的區(qū)別
標簽控制和Js控制
我們在進行路由跳轉(zhuǎn)時楼眷，有兩種方法铲汪，第一種是通過標簽來完成跳轉(zhuǎn)動作，例如
{/*只渲染出第一個與當前訪問地址匹配的 <Route> 或 <Redirect>摩桶。 */}
<Switch>
{/* 用了Switch 這里每次只匹配一個路由桥状，所有只有一個節(jié)點。 */}
<Route/>
<Route/>
</Switch>
{/*Link 最簡單的跳轉(zhuǎn)硝清，直接跳轉(zhuǎn)到相應(yīng)路徑下并顯示組件 */}
<Link to={to} {...rest} />
{/*渲染時將導航到一個新地址辅斟，這個新地址覆蓋在訪問歷史信息里面的本該訪問的那個地址 */}
<Redirect to={to} {...rest} />
還有一種方式就是通過對象來控制路由跳轉(zhuǎn)，即Js代碼控制芦拿，例如
使用history對象即可完成路由跳轉(zhuǎn)
History對象使用
在不同的 javascript 環(huán)境中士飒， history 以多種能夠行駛實現(xiàn)了對會話（session）歷史的管理。
history 對象通常具有以下屬性和方法：
Location對象
location對象包含了當前位置的相關(guān)信息蔗崎，而且location是不會發(fā)生改變的酵幕，因此可以在生命周期的回調(diào)函數(shù)中使用location對象來查看當前頁面的訪問地址是否發(fā)生改變。
實例
至此為止缓苛，我們對react-router的概念進行了簡單梳理芳撒，更多詳細的內(nèi)容可以移步本文參考文章，里面有更多詳細的介紹。本文的側(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學習芥备，
同時，可以參考React Router頁面?zhèn)髦档娜N方法舌菜，不過此版本貌似不是基于react-router4.0的萌壳，存在一些問題，在調(diào)試的時候可以把程序的this.props打印出來日月，在控制臺里查看袱瓮。
