快捷導(dǎo)航

React路由跳轉(zhuǎn)的實(shí)現(xiàn)示例

更新時(shí)間：2023年12月25日 10:01:08 作者：duansamve

在React中,可以使用多種方法進(jìn)行路由跳轉(zhuǎn),本文主要介紹了React路由跳轉(zhuǎn)的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下

1. push 與 replace 模式

默認(rèn)情況下，開(kāi)啟的是 push 模式，也就是說(shuō)，每次點(diǎn)擊跳轉(zhuǎn)，都會(huì)向棧中壓入一個(gè)新的地址，在點(diǎn)擊返回時(shí)，可以返回到上一個(gè)打開(kāi)的地址，

就像上圖一樣，我們每次返回都會(huì)返回到上一次點(diǎn)擊的地址中

當(dāng)我們?cè)谧x消息的時(shí)候，有時(shí)候我們可能會(huì)不喜歡這種繁瑣的跳轉(zhuǎn)，我們可以開(kāi)啟 replace 模式，這種模式與 push 模式不同，它會(huì)將當(dāng)前地址替換成點(diǎn)擊的地址，也就是替換了新的棧頂

我們只需要在需要開(kāi)啟的鏈接上加上 replace 即可

<Link replace to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>

2. 編程式路由導(dǎo)航

我們可以采用綁定事件的方式實(shí)現(xiàn)路由的跳轉(zhuǎn)，我們?cè)诎粹o上綁定一個(gè) onClick 事件，當(dāng)事件觸發(fā)時(shí)，我們執(zhí)行一個(gè)回調(diào) replaceShow

這個(gè)函數(shù)接收兩個(gè)參數(shù)，用來(lái)仿制默認(rèn)的跳轉(zhuǎn)方式，第一個(gè)是點(diǎn)擊的 id 第二個(gè)是標(biāo)題

我們?cè)诨卣{(diào)中，調(diào)用 this.props.location 對(duì)象下的 replace 方法

replaceShow = (id, title) => {
  this.props.history.replace(`/home/message/detail/${id}/${title}`)
}

同時(shí)我們可以借助 this.props.history 身上的 API 實(shí)現(xiàn)路由的跳轉(zhuǎn)，例如 go、goBack 、goForward

3. withRouter

當(dāng)我們需要在頁(yè)面內(nèi)部添加回退前進(jìn)等按鈕時(shí)，由于這些組件我們一般通過(guò)一般組件的方式去編寫(xiě)，因此我們會(huì)遇到一個(gè)問(wèn)題，無(wú)法獲得 history 對(duì)象，這正是因?yàn)槲覀儾捎玫氖且话憬M件造成的。

只有路由組件才能獲取到 history 對(duì)象

因此我們需要如何解決這個(gè)問(wèn)題呢

我們可以利用 react-router-dom 對(duì)象下的 withRouter 函數(shù)來(lái)對(duì)我們導(dǎo)出的 Header 組件進(jìn)行包裝，這樣我們就能獲得一個(gè)擁有 history 對(duì)象的一般組件

我們需要對(duì)哪個(gè)組件包裝就在哪個(gè)組件下引入

// Header/index.jsx
import { withRouter } from 'react-router-dom'
// 在最后導(dǎo)出對(duì)象時(shí)，用 `withRouter` 函數(shù)對(duì) index 進(jìn)行包裝
export default withRouter(index);

這樣就能讓一般組件獲得路由組件所特有的 API

4. BrowserRouter 和 HashRouter 的區(qū)別

它們的底層實(shí)現(xiàn)原理不一樣

對(duì)于 BrowserRouter 來(lái)說(shuō)它使用的是 React 為它封裝的 history API ，這里的 history 和瀏覽器中的 history 有所不同噢！通過(guò)操作這些 API 來(lái)實(shí)現(xiàn)路由的保存等操作，但是這些 API 是 H5 中提出的，因此不兼容 IE9 以下版本。

對(duì)于 HashRouter 而言，它實(shí)現(xiàn)的原理是通過(guò) URL 的哈希值，但是這句話我不是很理解，用一個(gè)簡(jiǎn)單的解釋就是

我們可以理解為是錨點(diǎn)跳轉(zhuǎn)，因?yàn)殄^點(diǎn)跳轉(zhuǎn)會(huì)保存歷史記錄，從而讓 HashRouter 有了相關(guān)的前進(jìn)后退操作，HashRouter 不會(huì)將 # 符號(hào)后面的內(nèi)容請(qǐng)求。兼容性更好！

地址欄的表現(xiàn)形式不一樣