大家好，我是小丞同學，一名大二的前端愛好者
這篇文章是學習 React 中 React 路由跳轉的學習筆記
非常感謝你的閱讀，不對的地方歡迎指正
願你忠于自己，熱愛生活
1. push 與 replace 模式
預設情況下，開啟的是 push 模式，也就是說，每次點選跳轉，都會向棧中壓入一個新的位址，在點選傳回時，可以傳回到上一個打開的位址，
就像上圖一樣，我們每次傳回都會傳回到上一次點選的位址中
當我們在讀消息的時候，有時候我們可能會不喜歡這種繁瑣的跳轉，我們可以開啟 replace 模式，這種模式與 push 模式不同，它會将目前位址替換成點選的位址，也就是替換了新的棧頂
我們隻需要在需要開啟的連結上加上 replace 即可
<Link replace to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link> 2. 程式設計式路由導航
我們可以采用綁定事件的方式實作路由的跳轉，我們在按鈕上綁定一個 onClick 事件，當事件觸發時，我們執行一個回調 replaceShow
這個函數接收兩個參數，用來仿制預設的跳轉方式，第一個是點選的 id 第二個是标題
我們在回調中，調用 this.props.location 對象下的 replace 方法
replaceShow = (id, title) => {
this.props.history.replace(`/home/message/detail/${id}/${title}`)
} 同時我們可以借助 this.props.history 身上的 API 實作路由的跳轉，例如 go、goBack 、goForward
3. withRouter
當我們需要在頁面内部添加回退前進等按鈕時，由于這些元件我們一般通過一般元件的方式去編寫，是以我們會遇到一個問題，無法獲得 history 對象，這正是因為我們采用的是一般元件造成的。
隻有路由元件才能擷取到 history 對象
是以我們需要如何解決這個問題呢
我們可以利用 react-router-dom 對象下的 withRouter 函數來對我們導出的 Header 元件進行包裝，這樣我們就能獲得一個擁有 history 對象的一般元件
我們需要對哪個元件包裝就在哪個元件下引入
// Header/index.jsx
import { withRouter } from 'react-router-dom'
// 在最後導出對象時，用 `withRouter` 函數對 index 進行包裝
export default withRouter(index); 這樣就能讓一般元件獲得路由元件所特有的 API
4. BrowserRouter 和 HashRouter 的差別
它們的底層實作原理不一樣
對于 BrowserRouter 來說它使用的是 React 為它封裝的 history API ，這裡的 history 和浏覽器中的 history 有所不同噢！通過操作這些 API 來實作路由的儲存等操作，但是這些 API 是 H5 中提出的，是以不相容 IE9 以下版本。
對于 HashRouter 而言，它實作的原理是通過 URL 的哈希值，但是這句話我不是很了解，用一個簡單的解釋就是
我們可以了解為是錨點跳轉，因為錨點跳轉會儲存曆史記錄，進而讓 HashRouter 有了相關的前進後退操作，HashRouter 不會将 # 符号後面的内容請求。相容性更好！
位址欄的表現形式不一樣
·HashRouter 的路徑中包含 # ，例如 localhost:3000/#/demo/test
重新整理後路由 state 參數改變
1.在BrowserRouter 中，state 儲存在history 對象中，重新整理不會丢失
2.HashRouter 則重新整理會丢失 state