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|HashRouter

# App（或其它元件）NavLink|LinkRouteRoute

#Redirect	子元件	NavLink|Link
…

#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，只渲染一個路由，排他性路由,預設全匹配(場景：側邊欄和麵包屑，引導選項卡等##作用##fromstring來自#tostring object##去向新增歷史記錄嚴格符合#區分大小寫

	#屬性	類型
	push	boolean
	exact	boolean
	sensitive	boolean

## 【相關推薦：Redis影片教學

】###

以上是react路由有哪些常用元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！