React路由 基礎:react-router-dom

狗狗听话發表於2024-06-03

這裡簡單介紹一下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.接收引數的方式要與路由跳轉傳遞引數的方式一致。

相關文章