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了

http://localhost:3000/detail

    接收參數：

##    列印結果

3。直接使用

    存取結果

    http://localhost:3000/detail/3

#（2）路由參數傳值

    路由參數

    跳轉參數：

    接收參數：

    列印結果

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