這裡簡單介紹一下react路由基礎的知識,以及基礎操作
一,安裝命令
npm install react-router-dom
二,路由模式
1.ReactRouter支援兩種路由模式:BrowserRouter和HashHistory。
2.BrowserRouter使用URL中的/來定義路由,例如:http://xxx.com/Search
3.HashHistory使用URL中的#來定義路由,例如:http://xxx.com/#/Search
三,常用路由元件
BrowserRouter元件
1.一個app應用中最好只有一個BrowserRouter元件,最好放在最頂層所有元件之外,這樣可以確保內部元件在使用Link做路由跳轉時不會出現出錯
Routes元件
1.用於將多個Route元件組合在一起。
Route元件
1.Route元件用於定義路由規則,元件可以巢狀使用,用於定義更復雜的路由規則。
2.Route的path屬性用於定義路由的路徑
3.Route的element屬性用於定義路由對應的元件,element屬性值必須寫成標籤的形式。
4.Route的index屬性用於指定預設子路由。
Link元件
1.元件用於建立路由連結,類似於<a>標籤
2.Link的to屬性用於指定連線地址,它的值可以是字串還可以是一個location物件。
四,傳遞引數
傳遞引數三種方式
search傳參方式,例如:http://localhost:3000/fbetList?key=Michael
params傳參方式,例如:http://localhost:3000/fbetList/Michael
state傳參方式,例如:navigate('/home', { state: { key: 'Michael' } });
1.search方式傳遞引數
2.search方式接收引數
2.params方式傳遞引數
4.params方式接收引數
注意:
1.首先要配置正確路由路徑,即正確的<BrowserRouter>、<Routes>、<Route>標籤設定
2.navigate方法跳轉的路徑如果沒有配置<Route>標籤,那麼跳轉會發生未知的錯誤。
3.navigate方法跳轉方式要與<Route>標籤配置的跳轉方式一致。
4.接收引數的方式要與路由跳轉傳遞引數的方式一致。