react路由有哪些

react路由有：1、頁面路由，程式碼如「window.location.href='...'history.back()」；2、h5路由，程式碼如「window.onchange = function ( ) {console.log(window.location.hash)}」；3、hash路由，程式碼如「history.pushState(...)」。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react路由有哪些？

React中的路由

一、常見的三種路由

（1）頁路由

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

（2）h5路由

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

  ：h5路由

：hash路由

2、路由規則

：包裹元件

3、理由選項

：解決匹配問題，依照順序匹配，如果匹配到前面的後面的就不匹配了。

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

4、跳轉導航，相當於a標籤

：跳頁

：增強版的Link

5、自動跳轉

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

三、React-Router使用

1、導入包

yarn add react-router-dom

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

2、BrowserRouter包裹

<browserrouter>
    <div>
        <route></route>
        <route></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）路由參數傳值

    路由參數

    

    跳躍參數：

##    

    接收參數：

    this.props.match.params.id

##    列印結果

3。直接使用

    存取結果

    http://localhost:3000/detail/3

#（2）路由參數傳值

    路由參數

    

    跳轉參數：

    

    接收參數：

##    this.props.location.search

    列印結果

#_

    ?id=3。需要自行解析

    存取結果

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

#####    http://localhost:3000/detail?id=3##########4、跳躍原理######Link的to參數符合導Route中的path參數，則執行跳轉，跳到Route中的component中設定的元件。 ######網路摘要的一個圖形描述的很到位：################ 推薦學習：《###react影片教學###》##### #

以上是react路由有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！