react路由

特點：虛擬DOM 元件化開發 多端適配

 多端適配 web端 react-router-dom 模組

　　　　native端 react-router-native模組

都依賴react-router模組，不同react版本使用路由方式不同

使用：

　　引入react-router-dom：

　　步驟1 通過Switch元件定義路由渲染位置， 通過Router元件定義路由規則

　　path 定義規則(vue規則一樣)

　　name 定義名稱

　　component 定義元件

　　exact 是否精確匹配

　　注：可以不使用Switch元件，此時不能保證同時只顯示一個頁面

　　步驟2 確定路由渲染策略

　　　　BrowerRouter  基於path策略是實現， 類似vue的history策略

　　　　　　需要伺服器端配合，做重定向， 實現的是多頁面應用

　　　　HashRouter 基於hash策略實現的

　　　　實現的是單面應用

　　　　用路由策略元件渲染應用程式元件

拓展:

路由重定向 

　　在React路由中， 通過Redirect元件實現路由重定向

　　from 定義匹配地址 to 定義重定向地址

預設路由

　　路由中 path *  寫在最後面

路由導航

　　　Link元件： to 切換地址， 即使是hash策略  不要以#開頭， 只能渲染成a標籤　　　　　　

　　　與a標籤相比， Link元件可以適配不同的路由策略。

路由資料

　　通過Route元件渲染頁面元件可以通過屬性獲取路由資料

　　match 包含對路由規則解析的資料

　　location 包含當前真實地址的資訊（類似全域性location）

　　history：包含路由操作的方法(類似全域性的history

 　沒有通過Route元件渲染元件不具有路由資料 獲取路由資料 

　　1.父子元件通訊的方式傳遞資料可以傳遞部分資料

　　2.繼續使用Route元件渲染該元件

　　3.使用withRouter方法拓展高階元件