match，location，history

哇，日常寫路由時基本就是簡單的按照組件給的示例寫，歷來沒有考慮爲何，又碰見了路由相關的問題，先記錄一下問題，好好捋一下，哎，好香要個大佬來帶帶我呀，每次遇到問題要解決很久

---

問題： 判斷是否登陸以後跳轉到登陸頁面，路徑對了，可是卻沒有加載該頁面的內容？

截圖：

 

 思路：在checkLogin裏用到了withRouter，不曉得是否是props沒傳過來，決定好好捋一下路由的原理，而後再去查到底是哪裏出了問題，可是真的好奇怪呀，以前的項目我也用到了react-router就沒這樣的問題...

解決進程：待解決（11.12  11：00）

---

 要被本身蠢哭了，是由於寫成大寫了......細心！細心！細心！

 

順便記錄一下在babel 7.1.0裏如何配置@connect

 

 注意：由於在.babelrc裏寫了就不要在package.json裏寫了，刪除package.json裏的babel配置，而後在.babelrc文件裏作以下修改

     

"presets": ["@babel/preset-env", "react-app"],

 

 

修改於（11/12 15：30）

---

 

match:匹配路徑參數的對象

location：能夠經過改變它相關的參數來改變路由

history：同上，另外一種api，改變url而不刷新頁面

單頁面路由：每次切換頁面的時，不須要請求服務器，只要經過本地的js來切換便可. hash和history兩種路由模式。

hashchange 事件能監聽 url hash 的改變, popstate事件能監聽除 history.pushState() 和 history.replaceState() 外 url 的變化。

在html5中的history api包括兩個方法history.pushState()和history.replaceState()，包含一個事件history.onpopstate

history.pushState(stateObj, title, url)

• stateObj爲一個狀態對象，這個對象能夠被popstate事件讀取到，也能夠在history對象中獲取。
• title爲標題，可是瀏覽器目前還沒能實現，因爲其自己是一個字符串，因此咱們使用‘’來代替便可。
• url爲路徑。通常設定爲相對的url，絕對路徑須要保證同源。 

　　pushState向瀏覽器的歷史記錄棧中壓入一個歷史記錄。

history.replaceState()

　　這個就比較好理解了，接受的參數都是同樣的，做用就是替換當前歷史記錄棧中的記錄。

onpopstate事件　　

　　在瀏覽器前進、後退時觸發，通常就是歷史記錄棧中的指針改變的時候就會觸發這個事件了。

---

 

 參考來源：

 1.單頁面應用路由的兩種實現方式    https://www.cnblogs.com/zhuzhenwei918/p/7421430.html

 2.完全搞懂路由跳轉：location 和 history 接口  https://segmentfault.com/a/1190000014120456