react路由常用組件是什么

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

創(chuàng)新互聯(lián)建站專注于寶山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供寶山營(yíng)銷型網(wǎng)站建設(shè)，寶山網(wǎng)站制作、寶山網(wǎng)頁設(shè)計(jì)、寶山網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造寶山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寶山網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

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電腦。

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

組件及其作用：


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

結(jié)構(gòu)

  • BrowserRouter|HashRouter

    App（或其它組件）

    • 子組件

    • NavLink|Link

    • Route

    • …

    • NavLink|Link

    • Route

    • Redirect

BrowserRouter

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

Route

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

Link

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

NavLink

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

Switch

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

屬性類型作用
locationstring object
childrennode

Redirect

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

屬性類型作用
fromstring來自
tostring object去向
pushboolean添加歷史記錄
exactboolean嚴(yán)格匹配
sensitiveboolean區(qū)分大小寫

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

當(dāng)前標(biāo)題：react路由常用組件是什么
網(wǎng)頁地址：http://bm7419.com/article16/pcgpdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、定制網(wǎng)站、動(dòng)態(tài)網(wǎng)站、建站公司、網(wǎng)站設(shè)計(jì)公司、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名