今天小編給大家分享一下react常見(jiàn)的路由有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、科爾沁左翼網(wǎng)絡(luò)推廣、微信小程序開(kāi)發(fā)、科爾沁左翼網(wǎng)絡(luò)營(yíng)銷(xiāo)、科爾沁左翼企業(yè)策劃、科爾沁左翼品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供科爾沁左翼建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

react路由有：1、頁(yè)面路由，代碼如“window.location.href='...'history.back()”；2、h6路由，代碼如“window.onchange = function () {console.log(window.location.hash)}”；3、hash路由，代碼如“history.pushState(...)”。

一、常見(jiàn)的三種路由

（1）頁(yè)面路由

window.location.href='https://www.hao123.com/'
history.back()

（2）h6路由

window.location = '#hash'
window.onchange = function () {
    console.log(window.location.hash)
}

（3）hash路由

//推進(jìn)一個(gè)狀態(tài)
history.pushState('name','title','/path')
//替換一個(gè)狀態(tài)
history.replaceState('name','title','/path')

二、React-Router路由介紹

1、路由方式

 ：h6路由

：hash路由

2、路由規(guī)則

：包裹組件

3、理由選項(xiàng)

：解決匹配問(wèn)題，按照順序匹配，如果匹配到前面的后面的就不匹配了。

例如：/path和、path/list這樣的，按照順序path/list會(huì)匹配導(dǎo)/path，達(dá)不到想要的效果，加上exact關(guān)鍵詞做到完全匹配，必須完全一樣才能匹配到。

4、跳轉(zhuǎn)導(dǎo)航，相當(dāng)于a標(biāo)簽

：跳轉(zhuǎn)頁(yè)面

：增強(qiáng)版的Link

5、自動(dòng)跳轉(zhuǎn)

：不用點(diǎn)擊，執(zhí)行到這塊就自動(dòng)跳轉(zhuǎn)

三、React-Router使用

1、導(dǎo)入包

yarn add react-router-dom

import {BrowserRouter, Route, Link} from "react-router-dom";

2、BrowserRouter包裹

• component用來(lái)修飾要跳轉(zhuǎn)的路由頁(yè)面，頁(yè)面內(nèi)容為：Home、Detail是兩個(gè)真實(shí)的組件

• path：匹配的路由規(guī)則

• exact：修飾匹配的效果，加上表示精確匹配，不加表示模糊匹配，例如：

• path={'/'}表示匹配：http://localhost:3000/，如果是http://localhost:3000/99就無(wú)法匹配了

• path={'/detail/'}表示匹配：http://localhost:3000/detail/xxxxxxx，后面的不限制，前面的的匹配成功就OK了

3、路由的傳值

http://localhost:3000/detail

（1）路由參數(shù)傳值

路由參數(shù)

跳轉(zhuǎn)參數(shù)：

接收參數(shù)：

this.props.match.params.id

打印結(jié)果

3。直接使用

訪問(wèn)結(jié)果

http://localhost:3000/detail/3

（2）路由參數(shù)傳值

    路由參數(shù)

跳轉(zhuǎn)參數(shù)：

接收參數(shù)：

this.props.location.search

打印結(jié)果

?id=3。需要自己解析

訪問(wèn)結(jié)果

http://localhost:3000/detail?id=3

4、跳轉(zhuǎn)原理

Link的to參數(shù)匹配導(dǎo)Route中的path參數(shù)，則執(zhí)行跳轉(zhuǎn)，跳轉(zhuǎn)到Route中的component中設(shè)置的組件。

圖片描述：

以上就是“react常見(jiàn)的路由有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。