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

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

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

一、常見的三種路由

（1）頁面路由

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、路由方式

<BrowserRouter/>  ：h6路由

<HashRouter>：hash路由

2、路由規(guī)則

<Route/>：包裹組件

3、理由選項(xiàng)

<Switch/>：解決匹配問題，按照順序匹配，如果匹配到前面的后面的就不匹配了。

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

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

<Link/>：跳轉(zhuǎn)頁面

<NavLink/>：增強(qiáng)版的Link

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

<Redirect/>：不用點(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包裹

<BrowserRouter>
   <div>
       <Route path={'/'} exact component={Home}></Route>
       <Route path={'/detail/'} component={Detail}></Route>
   </div>
</BrowserRouter>

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

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

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

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

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

3、路由的傳值

http://localhost:3000/detail

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

路由參數(shù)

<Route path={'/detail/:id'} component={Detail}></Route>

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

<Link key={index} to={'/detail/' + item.id}>

接收參數(shù)：

this.props.match.params.id

打印結(jié)果

3。直接使用

訪問結(jié)果

http://localhost:3000/detail/3

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

    路由參數(shù)

<Route path={'/detail'} component={Detail}></Route>

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

<Link key={index} to={'/detail？=' + item.id}>

接收參數(shù)：

this.props.location.search

打印結(jié)果

?id=3。需要自己解析

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

網(wǎng)站名稱：react常見的路由有哪些
本文來源：http://www.rwnh.cn/article22/jijpjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站營銷、品牌網(wǎng)站建設(shè)、網(wǎng)站收錄、云服務(wù)器、用戶體驗(yàn)

廣告

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