react路由有哪些常用元件

react路由常用元件有：1、BrowserRouter，設定路由模式為history；2、HashRouter，設定路由模式為hash；3、NavLink；4、Link；5、Redirect；6、Route；7、withRouter等等。

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

React路由提供常用元件的詳解

元件及其作用：

	元件	作用
路由模式	BrowserRouter	約定模式為 history，使用 HTML5 提供的 history API 來保持 UI 和 URL 的同步
路由模式	HashRouter	約定模式為 hash，使用 URL 的 hash 來保持 UI 和URL 的同步
宣告式跳轉	NavLink	宣告式跳轉還可以約定路由啟用狀態
宣告式跳轉	Link	宣告式跳轉無啟用狀態
重定向	Redirect	重定向 ~~ replace
匹配並展示	Route	匹配元件，並展示元件。即匹配成功後，元件立即被替換成匹配的元件
排他性匹配	Switch	排他性匹配。如果不想使用包容性，那麼使用Switch。
高階元件	withRouter	把不是通過路由切換過來的元件中，將 history、location、match 三個物件傳入props物件上（高階元件）

結構

BrowserRouter

屬性	型別	作用
basename	string	所有位置的基本URL。如果您的應用是從伺服器上的子目錄提供的，則需要將其設定為子目錄。格式正確的基本名稱應以斜槓開頭，但不能以斜槓結尾
getUserConfirmation	Function	用於確認導航的功能。預設使用`window.confirm`。

Route

屬性	型別	作用
path	string \|object	路由匹配路徑。沒有path屬性的Route 總是會匹配
exact	boolean	為true時，要求全路徑匹配(/home)。路由預設為「包含」的(/和/home都匹配)，這意味著多個 Route 可以同時進行匹配和渲染
component	Function \|component	在地址匹配的時候React的元件才會被渲染，route props也會隨著一起被渲染
render	Function	內聯渲染和包裝元件，要求要返回目標元件的呼叫

Link

屬性	型別	作用
to	string \| 物件{pathname:,search:,hash:}	要跳轉的路徑或地址
replace	boolean	是否替換歷史記錄

NavLink

屬性	型別	作用
to	string\|物件{pathname:,search:,hash:}	要跳轉的路徑或地址
replace	boolean	是否替換歷史記錄
activeClassName	string	當元素被選中時，設定選中樣式，預設值為 active
activeStyle	object	當元素被選中時，設定選中樣式

Switch

該元件用來渲染匹配地址的第一個Route或者Redirect，僅渲染一個路由，排他性路由,預設全匹配(場景：側邊欄，引導索引標籤等)

屬性	型別	作用
location	string object
children	node

Redirect

該元件用來渲染匹配地址的第一個Route或者Redirect，僅渲染一個路由，排他性路由,預設全匹配(場景：側邊欄和麵包屑，引導索引標籤等

【相關推薦：Redis視訊教學】

以上就是react路由有哪些常用元件的詳細內容，更多請關注TW511.COM其它相關文章！