react常見的路由有哪些

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

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路由

//推進一個狀態
history.pushState('name','title','/path')
//替換一個狀態
history.replaceState('name','title','/path')

二、React-Router路由介紹

1、路由方式

<BrowserRouter/>  ：h6路由

<HashRouter>：hash路由

2、路由規則

<Route/>：包裹組件

3、理由選項

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

例如：/path和、path/list這樣的，按照順序path/list會匹配導/path，達不到想要的效果，加上exact關鍵詞做到完全匹配，必須完全一樣才能匹配到。

4、跳轉導航，相當于a標簽

<Link/>：跳轉頁面

<NavLink/>：增強版的Link

5、自動跳轉

<Redirect/>：不用點擊，執行到這塊就自動跳轉

三、React-Router使用

1、導入包

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用來修飾要跳轉的路由頁面，頁面內容為：Home、Detail是兩個真實的組件

• path：匹配的路由規則

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

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

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

3、路由的傳值

http://localhost:3000/detail

（1）路由參數傳值

路由參數

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

跳轉參數：

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

接收參數：

this.props.match.params.id

打印結果

3。直接使用

訪問結果

http://localhost:3000/detail/3

（2）路由參數傳值

    路由參數

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

跳轉參數：

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

接收參數：

this.props.location.search

打印結果

?id=3。需要自己解析

訪問結果

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

4、跳轉原理

Link的to參數匹配導Route中的path參數，則執行跳轉，跳轉到Route中的component中設置的組件。

圖片描述：

以上就是“react常見的路由有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。