1、單頁面應用的路由基本原理

demo1

router1.html
復制代碼

以 hash 形式為例。

1、init 監聽瀏覽器 url hash 更新事件。

2、route 存儲路由更新時的回調到回調數組routes中，回調函數將負責對頁面的更新。

3、refresh 執行當前url對應的回調函數，更新頁面

當 url 的 hash 發生變化時，觸發 hashchange 注冊的回調，回調中去進行不同的操作，進行不同的內容的展示。

History API 可以實現 path 形式

demo2

router2.html
復制代碼

react-router 是基于 history 模塊提供的 api 進行開發的。

這個例子來簡單模擬下 react-router 的模式。

Router 通過對 history 進行包裝開發，針對 historyModule 的機制對 Router 也起到了作用，即historyModule.updateLocation() 將觸發 Router.listen 中的回調函數

2、react-router 部分源碼探索與實踐

react-router 中 Router 部分源碼

Router 在這里對 history 進行了一個監聽，正常調用了 history 以后，這邊就會接收到這個更新，回調函數將在 url 更新時觸發， 并且觸發一次setState，觸發頁面刷新

Route 部分源碼

props.match為true 就會渲染出組件

mathPath 部分源碼

dva-router——react-router-dom/ react-router-redux

應用

ConnectedRouter 為 react-router-redux 內的對象 ConnectedRouter 的標簽

dva 的 router.js

dva 的 package.json

react-router-dom

Router / BrowserRouter / HashRouter / MemoryRouter / StaticRouter

BrowserRouter

HashRouter

MemoryRouter

<MemoryRouter> 組件在內存中保存“URL”信息，不會修改瀏覽器的地址欄，往往用于React Native 等非瀏覽器環境。

StaticRouter

<StaticRouter> 組件 不修改路由，這在服務器端渲染時很有用。

Route

Redirect

Switch

Link

react-router-redux

react-router-redux 是 React-Router 與 Redux 的深度集成，它將路由完全納入 store 中進行管理，使 store 成為了 URL（或者說是 history）的數據來源，也使我們能夠通過 dispatch action 的方式來修改 URL

ConnectedRouter

dispatch 就相當于調用了 history 的 push replace 等方法。當發起了一個dispatch并且正常調用了history以后，Router 就會接收到這個更新，并且觸發一次setState 刷新頁面