原理：react-router 是依賴于第三方j(luò)s庫(kù)history。而我們平時(shí)輸在瀏覽器的URL則被history轉(zhuǎn)換為location對(duì)象囊咏，
然后react-router的Router 組件會(huì)在componentWillMount 生命周期中就調(diào)用了history.listen方法株茶，從而達(dá)到當(dāng)路由變化来涨， 會(huì)去調(diào)用setState 方法，修改location启盛。然后通過(guò)context傳遞給<Route>組件蹦掐，Route組件內(nèi)部就匹配傳下來(lái)的nextContext，從而去渲染對(duì)應(yīng)的路由組件僵闯。
常用的history有三種
- createHashHistory
- createBrowserHistory
- createMemoryHistory
createHashHistory使用 URL 中的 hash（#）部分去創(chuàng)建形如
example.com/#/some/path的路由卧抗。沒(méi)有相應(yīng)的方法去替換歷史記錄的功能，并且并不知道 hash 部分的細(xì)節(jié)
createBrowserHistory使用瀏覽器中的 History API 用于處理 URL鳖粟，創(chuàng)建一個(gè)像
example.com/some/path這樣真實(shí)的 URL 社裆。并且瀏覽器提供相應(yīng)的接口來(lái)修改瀏覽器的歷史記錄，若服務(wù)端支持History API 向图，這樣服務(wù)端能獲取請(qǐng)求細(xì)節(jié)泳秀。
題外話： 單頁(yè)面應(yīng)用時(shí)候如果用的是createBrowserHistory的話，那么需要服務(wù)端做404處理张漂，指向index.html晶默〗髂龋或者嘗試nginx有一個(gè)配置try-file 指向index航攒。而hash就不會(huì)出現(xiàn)404，因?yàn)橛肋h(yuǎn)都是根路徑趴梢。
我們主要看下history怎么對(duì)路由變化監(jiān)聽(tīng)的 只針對(duì)createBrowserHistory
參考掘金大神 https://juejin.im/post/5d4a68f5e51d4561ae4da5c6
重點(diǎn)
從上面看出件監(jiān)聽(tīng)的回調(diào)函數(shù)handlePopState ,其最終是通過(guò)setState 來(lái)觸發(fā)路由監(jiān)聽(tīng)者漠畜，其中notifyListeners 會(huì)調(diào)用所有的listen 的回調(diào)函數(shù)，從而達(dá)到通知監(jiān)聽(tīng)路由變化的監(jiān)聽(tīng)者坞靶。
react-router使用
就不一一贅述
路由器組件(<BrowserRouter>憔狞、<HashRouter>)
路由匹配組件(<Route>、<Switch>)
導(dǎo)航組件(<Link>彰阴、<NavLink>瘾敢、<Redirect>)。
