react路由常用組件是什么

發(fā)布時(shí)間：2022-03-22 09:37:08 來(lái)源：億速云閱讀：372 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)react路由常用組件是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

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

react路由常用組件是什么

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

組件及其作用：

	組件	作用
路由模式	BrowserRouter	約定模式為 history，使用 HTML5 提供的 history API 來(lái)保持 UI 和 URL 的同步
路由模式	HashRouter	約定模式為 hash，使用 URL 的 hash 來(lái)保持 UI 和URL 的同步
聲明式跳轉(zhuǎn)	NavLink	聲明式跳轉(zhuǎn) 還可以約定路由激活狀態(tài)
聲明式跳轉(zhuǎn)	Link	聲明式跳轉(zhuǎn) 無(wú)激活狀態(tài)
重定向	Redirect	重定向 ~~ replace
匹配并展示	Route	匹配組件，并展示組件。即匹配成功后，組件立即被替換成匹配的組件
排他性匹配	Switch	排他性匹配。如果不想使用包容性，那么使用Switch。
高階組件	withRouter	把不是通過(guò)路由切換過(guò)來(lái)的組件中，將 history、location、match 三個(gè)對(duì)象傳入props對(duì)象上（高階組件）

結(jié)構(gòu)

BrowserRouter

屬性	類(lèi)型	作用
basename	string	所有位置的基本URL。如果您的應(yīng)用是從服務(wù)器上的子目錄提供的，則需要將其設(shè)置為子目錄。格式正確的基本名稱(chēng)應(yīng)以斜杠開(kāi)頭，但不能以斜杠結(jié)尾
getUserConfirmation	Function	用于確認(rèn)導(dǎo)航的功能。默認(rèn)使用`window.confirm`。

Route

屬性	類(lèi)型	作用
path	string \|object	路由匹配路徑。沒(méi)有path屬性的Route 總是會(huì) 匹配
exact	boolean	為true時(shí)，要求全路徑匹配(/home)。路由默認(rèn)為“包含”的(/和/home都匹配)，這意味著多個(gè) Route 可以同時(shí)進(jìn)行匹配和渲染
component	Function \|component	在地址匹配的時(shí)候React的組件才會(huì)被渲染，route props也會(huì)隨著一起被渲染
render	Function	內(nèi)聯(lián)渲染和包裝組件，要求要返回目標(biāo)組件的調(diào)用

Link

屬性	類(lèi)型	作用
to	string \| 對(duì)象{pathname:,search:,hash:}	要跳轉(zhuǎn)的路徑或地址
replace	boolean	是否替換歷史記錄

NavLink

屬性	類(lèi)型	作用
to	string\|對(duì)象{pathname:,search:,hash:}	要跳轉(zhuǎn)的路徑或地址
replace	boolean	是否替換歷史記錄
activeClassName	string	當(dāng)元素被選中時(shí)，設(shè)置選中樣式，默認(rèn)值為 active
activeStyle	object	當(dāng)元素被選中時(shí)，設(shè)置選中樣式

Switch

該組件用來(lái)渲染匹配地址的第一個(gè)Route或者Redirect，僅渲染一個(gè)路由，排他性路由,默認(rèn)全匹配(場(chǎng)景：側(cè)邊欄，引導(dǎo)選項(xiàng)卡等)

屬性	類(lèi)型	作用
location	string object
children	node

Redirect

該組件用來(lái)渲染匹配地址的第一個(gè)Route或者Redirect，僅渲染一個(gè)路由，排他性路由,默認(rèn)全匹配(場(chǎng)景：側(cè)邊欄和面包屑，引導(dǎo)選項(xiàng)卡等

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

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡