react.js的兩種路由方式：HashRouter

前面我們已經了解了react.js其中一種路由方式。

這種方式是利用 html5的`window.history`，對瀏覽器歷史記錄的讀取。
`history.back()` 和在瀏覽器點擊后退按鈕相同；
`history.forward()`和在瀏覽器中點擊前進按鈕相同。

另外h5時段開始支持`pushState()`和`replaceState()`方法，並且當回退/前進是會觸發`onpopstate()`事件。
參考文檔：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate


從上面動圖可以看出：當我們刷新瀏覽器的時候 就出問題了。

HashRouter
現在 我們來學習另外一種路由方式：hash路由
參考示例：
https://reacttraining.com/react-router/web/api/HashRouter

把BrowserRouter改成HashRouter，其實也很簡單。
主要是引入的包不同：

import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';

#改為
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom';

就是把BrowserRouter改成HashRouter即可。

現在刷新瀏覽器就不會出錯了。

 

https://blog.csdn.net/github_26672553/article/details/76906488
---------------------
作者：學習筆記666
來源：CSDN
原文：https://blog.csdn.net/github_26672553/article/details/76906488
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！