react-router v4 理解

一、Router

（1）最基礎的路由器，必須有history屬性

（2）BrowserRouter和HashRouter都是由Router組件擴展而來

二、BrowserRouter

（1）BrowserRouter利用的是H5 的history API實現URL和UI同步

（2）內部的histroy對象由createBrowserHistory()生成

三、HashRouter

（1）HashRouter是經過改變URL的hash部分來實現URL和UI同步

（2）內部的histroy對象由createHashHistory()生成

四、路由跳轉的方式

（1）Link和NavLink

　　使用NavLink的時候要注意，通常會出現第一個NavLink始終存在active類名，加一個exact屬性就能夠了

（2）當組件被withRouter包裹，組件的props裏會又一個對象，對象裏包含history、location和match屬性，能夠用this.props.history.push()進行路由跳轉

（3）當路由器是HashRouter時，還能夠本身建立history對象進行路由跳轉，import { createHashHistory } from 'history'　　createHashHistory().push()進行路由跳轉

　　  當路由器是BrowserRouter時，createBrowserHistory().push()跳轉時會致使URL改變但界面沒更新，緣由待研究，可是能夠經過hack的方式解決：

　　  　　不用BrowserRouter, 用Router代替，向Router傳入封裝好的自定義的history對象（createBrowserHistory()），在須要用到createBrowserHistory().push()方法的組件內再導入這個自定義history對象，就能夠了