路由最基本的職責就是當頁面的訪問地址與 Route 上的 path 匹配時，就渲染出對應的 UI 界面。
路由器Router是React的一個組件，router是一個容器，包裹的route用來匹配url和組件
spa單頁面應用，路由鏈接不引起頁面跳轉，修改地址欄url，url一修改就會被瀏覽器的history前端路由監測到，一個路徑對應一個組件，匹配成功后就顯示對應的組件頁面
key：路徑path /home
value：組件component Home（用於展示頁面）
或者函數（node，express，后端路由，函數用於處理對應路由提交數據）
前端路由的基石，bom上帶的history函數，
方法一：H5推出的history的API（BrowserHistory），例如push、replace、back、forward方法，棧的執行模式，往里面存入數據，先進先出
方法二：HashHistory，使用hash值（錨點）多一個#，跳轉路由路徑拼接在#后面，錨點跳轉不會刷新頁面，但是會留下歷史記錄
react-router（web，native，anywhere）
react-router-dom（web）的理解route（路由），router（路由器，管理路由），react的插件庫，實現spa應用
路由組件和一般組件:1.寫法不同，<Demo/>,<Route path=,component=''>,2.存放位置不同，普通組件component，路由組件：pages，3.收到的props不同，普通組件傳什么收到什么，路由組件會收到三個屬性history，location，match
link實現組件切換,navLink導航區路由欄，類似a標簽，navlink選中的導航欄有高亮效果，link標簽沒有，用to控制去哪個組件，to可以接收一個對象，pathname指定去哪個頁面，能跳到用route注冊過的路由，route注冊路由，將url路徑與組件做一一對應匹配
默認嚴格匹配，輸入的路徑要包含匹配的路徑，順序要一致
開啟嚴格匹配會影響二級路由匹配，輕易不開啟嚴格匹配
redirect：重定向，一個都匹配不上的時候，由<Redirect to=' '/>指定默認去的頁面，當用戶訪問某界面時，該界面並不存在，此時用Redirect重定向，重新跳到一個我們自定義的組件里。
嵌套（多級）路由：先從一開始注冊的路由匹配，匹配上第一個路由去對應的組件匹配下一級對應的注冊路由，路由的匹配安裝注冊順序來的 /home/news,一級先/home，然后home組件里面對應上/home/news,多級路由不應該開啟嚴格匹配，會導致直接匹配不上
1.注冊子路由時要寫上父路由的path值，例如home里面的news，不能直接寫/news，要寫/home/news
2.路由的匹配安裝注冊路由順序進行
向路由組件傳遞參數數據：
1.攜帶params參數（直接在路徑里面寫），第一步：在link標簽里面to的路徑后面添加/xxxid/xxxtitle，第二步：在注冊路由的時候再path的后面添加/：id/：title聲明接收，第三步：路由跳到的組件里面的this.props.match.params里面帶了所有參數，刷新頁面不會丟失
2.search參數，第一步在link標簽to的路徑后面添加/？id=‘xxxx’&&title=‘xxxx’，無需聲明接收，正常注冊路由，接收路由跳到的組件里面的this.props.location.search里面帶了所有參數，需要自己將字符串正則，自己整理，以&做分割，用queryString分割（key=value&key=value urlencoded編碼格式），qs.stringify將對象轉成urlcoded編碼，qs.parse將urlcoded編碼轉成{key：value，key：value}格式，刷新頁面不會丟失
3.state參數，不會再url地址欄里面出現，給to傳遞一個對象{pathname：要去的地址，state:{參數}}，無需聲明，直接接收，組件接收時在this.props.location.state中是所有參數，刷新頁面不會丟失，因為使用的時browserRoute，操作的時history對象，location是history的一個對象，有歷史記錄，如果清掉歷史記錄，state值就沒了
params參數用得較多
push和replace的區別：push會留下歷史記錄，點擊一個歷史棧里面壓進一個地址，當前看到的都是棧頂的，開啟replace模式，替換棧頂的元素，不留下痕跡，link標簽里面帶有一個replace屬性，為true的時候開啟replace模式
編程式路由導航:主要是使用history身上的API，使用this.props.history.push/replace(''地址)，傳參跟to后面跟的一樣，注冊路由也是，goforward（前進），goback（回退），go(n)正數前進n步，負數后退n步
withRouter的使用：一般組件需要使用路由組件的API時需要用到，在react-route-dom上的一個方法，接收一個一般組件，返回一個帶有路由組件api的組件（高階組件）
BrowserRouter與HashRouter的區別
1.底層原理不一樣：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。#后面的值只是前端的東西，不會向服務器發送相關強求
2.path表現形式不一樣
BrowserRouter的路徑中沒有#,例如：localhost:3000/demo/test
HashRouter的路徑包含#,例如：localhost:3000/#/demo/test
3.刷新后對路由state參數的影響
(1).BrowserRouter沒有任何影響，因為state保存在history對象中。
(2).HashRouter刷新后會導致路由state參數的丟失！！！，因為沒有用上history Api，沒有歷史記錄
4.備注：HashRouter可以用於解決一些路徑錯誤相關的問題。