最近在做的新項目使用的技術棧是?React+AntDesign，本篇主要記錄在實踐過程中使用react-router-dom時遇到的一些方法的總結。

1、HashRouter和BrowserRouter

react-router-dom依賴于react-router，主要用于瀏覽器環境下的開發。它的路由基本有2個路由容器即HashRouter和BrowserRouter，HashRouter使用的是hashchange的方法，瀏覽的url中包含#，BrowserRouter使用的原理是H5的history API來使url發生改變。本文主要以HashRouter為例。

import{ HashRouterasRouter, Route, Switch }from"react-router-dom";importJoinfrom"./Join";importSuccessfrom"./Success";importLoginfrom"../Login";importHomefrom"../Home";? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

2、Switch

只渲染第一個匹配到的路由組件,Switch下的子節點只能是 Route 或 Redirect 元素。只有與當前訪問地址匹配的第一個子節點才會被渲染。

3、Route

Route 主要用于控制路徑對應顯示的組件，編程式導航三個路由屬性是：

exact：精準匹配，不再向下匹配

path：標識路由的路徑

component：路徑對應顯示的組件

4、Link和NavLink

路由導航：NavLink區別在于有一個屬性用來顯示跳轉選中的樣式。它具有：

activeStyle：可以直接寫選中的樣式

activeClassName：激活時應用的樣式名，默認是active

import{ Link }from"react-router-dom";About

to：鏈接到的路徑或位置

replace：替換路徑

5、withRouter

withRouter可以包裝任何自定義組件，將react-router 的 history,location,match 三個對象傳入。

無需一級級傳遞react-router 的屬性，當需要用的router 屬性的時候，將組件包一層withRouter，就可以拿到需要的路由信息。

主要用于子組件。

6、match

用于獲取路由的參數信息

console.log(this.props.match.params.id)

params：object 路徑參數，通過解析 URL 中的動態部分獲得鍵值對

isExact：為 true 時，整個 URL 都需要匹配

path：用來匹配的路徑模式

url： 匹配的鏈接

7、location

用來存放當前的路徑的信息

const{ pathname } =this.props.location;

pathname：url路徑

search：查詢字符串

hash：hash

8、history

可以用來手動跳轉到頁面

this.props.history.push('/user/list')