這篇文章給大家分享的是有關(guān)react路由常用組件是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。
創(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)頁(yè)設(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等等。
本教程操作環(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 | 把不是通過路由切換過來(lái)的組件中，將 history、location、match 三個(gè)對(duì)象傳入props對(duì)象上（高階組件） |
結(jié)構(gòu)
BrowserRouter|HashRouter
App（或其它組件）
子組件
NavLink|Link
Route
…
NavLink|Link
Route
Redirect
BrowserRouter
| 屬性 | 類型 | 作用 |
|---|---|---|
| basename | string | 所有位置的基本URL。如果您的應(yīng)用是從服務(wù)器上的子目錄提供的，則需要將其設(shè)置為子目錄。格式正確的基本名稱應(yīng)以斜杠開頭，但不能以斜杠結(jié)尾 |
| getUserConfirmation | Function | 用于確認(rèn)導(dǎo)航的功能。默認(rèn)使用window.confirm。 |
Route
| 屬性 | 類型 | 作用 |
|---|---|---|
| path | string |object | 路由匹配路徑。沒有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
| 屬性 | 類型 | 作用 |
|---|---|---|
| to | string | 對(duì)象{pathname:,search:,hash:} | 要跳轉(zhuǎn)的路徑或地址 |
| replace | boolean | 是否替換歷史記錄 |
NavLink
| 屬性 | 類型 | 作用 |
|---|---|---|
| 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)卡等)
| 屬性 | 類型 | 作用 |
|---|---|---|
| location | string object | |
| children | node |
Redirect
該組件用來(lái)渲染匹配地址的第一個(gè)Route或者Redirect，僅渲染一個(gè)路由，排他性路由,默認(rèn)全匹配(場(chǎng)景：側(cè)邊欄和面包屑，引導(dǎo)選項(xiàng)卡等
| 屬性 | 類型 | 作用 |
|---|---|---|
| from | string | 來(lái)自 |
| to | string object | 去向 |
| push | boolean | 添加歷史記錄 |
| exact | boolean | 嚴(yán)格匹配 |
| sensitive | boolean | 區(qū)分大小寫 |
感謝各位的閱讀！關(guān)于“react路由常用組件是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
重慶分公司
重慶分公司
