react路由常用組件是什么

發布時間：2022-03-22 09:37:08 來源：億速云閱讀：372 作者：小新欄目：web開發

這篇文章給大家分享的是有關react路由常用組件是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

react路由常用組件是什么

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

組件及其作用：

	組件	作用
路由模式	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，僅渲染一個路由，排他性路由,默認全匹配(場景：側邊欄和面包屑，引導選項卡等

感謝各位的閱讀！關于“react路由常用組件是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站