1. push 與 replace 模式

默認情況下，開啟的是 push 模式，也就是說，每次點擊跳轉(zhuǎn)，都會向棧中壓入一個新的地址，在點擊返回時，可以返回到上一個打開的地址，

就像上圖一樣，我們每次返回都會返回到上一次點擊的地址中

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

我們只需要在需要開啟的鏈接上加上 replace 即可

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

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

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

這個函數(shù)接收兩個參數(shù)，用來仿制默認的跳轉(zhuǎn)方式，第一個是點擊的 id 第二個是標題

我們在回調(diào)中，調(diào)用 this.props.location 對象下的 replace 方法

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

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

3. withRouter

當(dāng)我們需要在頁面內(nèi)部添加回退前進等按鈕時，由于這些組件我們一般通過一般組件的方式去編寫，因此我們會遇到一個問題，無法獲得 history 對象，這正是因為我們采用的是一般組件造成的。

只有路由組件才能獲取到 history 對象

因此我們需要如何解決這個問題呢

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

我們需要對哪個組件包裝就在哪個組件下引入

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

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

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

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

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

對于 HashRouter 而言，它實現(xiàn)的原理是通過 URL 的哈希值，但是這句話我不是很理解，用一個簡單的解釋就是

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

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

• HashRouter 的路徑中包含 # ，例如 localhost:3000/#/demo/test

刷新后路由 state 參數(shù)改變

• 在BrowserRouter 中，state 保存在history 對象中，刷新不會丟失
• HashRouter 則刷新會丟失 state

到此這篇關(guān)于React 路由跳轉(zhuǎn)的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)React 路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論