深入理解 React Router：從原理到實踐

李楊韜，一線前端工程師，碩士畢業於東南大學，目前在美團點評工作，專注於Web開發，擁有多年工程經驗，參與過眾多大型Web項目的設計，開發，同時也喜愛探索Web前沿技術。
 

第1章導航相關前驅知識1
1.1 URI和URL 1
1.1.1 URI和URL簡介1
1.1.2瀏覽器URI編碼3
1.2瀏覽器記錄4
1.2.1 history.pushState 5
1.2.2 history.replaceState 9
1.2. 3通過相對路徑添加和修改瀏覽器記錄11
1.2.4在base元素存在的情況下添加和修改瀏覽器記錄14
1.3在瀏覽器中跳轉15
1.3.1 window.history.go 15
1.3.2 window. history.forward 16
1.3.3 window.history.back 16
1.3.4 window.location.href 17
1.3.5 window.location.hash 17
1.3.6 window.location.replace 18
1.4瀏覽器相關事件介紹19
1.4.1 popstate事件19
1.4.2 hashchange事件21
1.4.3手動觸發事件22
1.5小結24
參考文獻24

第2章history庫詳解26
2.1 history庫概述26
2.2 browserHistory 32
2.2.1創建browserHistory 32
2.2.2 history導航33
2.2.3 history監聽37
2.3 hashHisotry 38
2.3.1創建hashHisotry 38
2.3.2 history導航40
2.3.3 history監聽45
2.3.4 history.createHref 47
2.4 memoryHistory 49
2.4.1創建memoryHistory 49
2.4.2 history導航50
2.4.3 history監聽53
2.5 history庫原理54
2.5.1 history庫的運行流程54
2.5.2 history模擬歷史棧55
2.5.3 browserHistory事件處理57
2.5.4 hashHistory事件處理58
2.5.5 history.block原理解析60
2.6 history庫限制63
2.6.1 history.block的使用限制63
2.6.2 decodeURI解碼問題64
2.7使用history替換頁面search和hash示例70
2.8小結71
參考文獻71

第3章React相關知識72
3.1 Context 72
3.2 Hooks 76
3.2.1 useState 76
3.2.2 useEffect 78
3.2.3 useLayoutEffect 84
3.2.4 useRef 86
3.2 .5 useMemo 87
3.2.6 useContext 89
3.2.7自定義Hook 89
3.3 Refs 90
3.3.1 createRef 90
3.3.2 forwardRef 91
3.4 Memo 91
3.5小結94
參考文獻94

第4章認識React Router 95
4.1 React Router是什麼95
4.2 React Router版本的演進96
4.3靜態路由與動態路由97
4.4使用React Router實現一個工程應用98
4.5小結107

第5章Router 109
5.1 Router是什麼109
5.2 Router源碼解析110
5.2.1 history監聽110
5.2.2提供初始Context 110
5.2.3提前監聽113
5.3 BrowserRouter 113
5.4 HashRouter 114
5.5 NativeRouter 115
5.6 StaticRouter 116
5.7相關Hooks 121
5.7.1 useRouterContext 122
5.7.2 useHistory 122
5.7.3 useLocation 123
5.8小結124
參考文獻124

第6章Route 125
6.1 Route是什麼125
6.2 Route的兩個基本要素125
6.2.1 Route的**個要素：path 126
6.2.2 Route的第二個要素：組件渲染方式134
6.3 Route傳入組件的3個參數138
6.3.1 match 138
6.3.2 location 140
6.3.3 history 141
6.4 Route的其他配置142
6.4.1 location 142
6.4.2 exact 142
6.4.3 strict 143
6.4.4 sensitive 144
6.5 Route源碼解析144
6.5.1上下文的更新144
6.5.2運行流程147
6.6相關Hooks 149
6.6. 1 useRouteMatch 149
6.6.2 useParams 149
6.7 Route實戰案例150
6.7.1嵌套Route 150
6.7.2相對路徑Route 152
6.7.3重定向Route 153
6.7.4默認子組件Route 156
6.7.5緩存Route 158
6.7. 6 Route渲染組件的可訪問性支持165
6.7.7 query及命名參數166
6.7.8 Route中的代碼拆分168
6.8小結169
參考文獻170

第7章Link 171
7.1 Link介紹171
7.1.1 Link的定義及屬性171
7.1.2 Link源碼解析174
7.2 NavLink 176
7.2.1帶激活態的Link 176
7.2.2轉義特殊字符178
7.2.3 NavLink源碼解析178
7.3 DeepLinking 181
7.4 BackButton 182
7.5導航實戰案例183
7.5.1為導航組件擴展路由匹配183
7.5.2相對上下文路徑導航組件184
7.5.3相對上下文路徑的導航方法185
7.5.4為導航組件擴展search和hash支持188
7.6小結191
參考文獻191

第8章其他路由組件及方法192
8.1 Switch 192
8.1.1 Switch簡介192
8.1.2 Switch源碼解析194
8.2 Redirect 196
8.2.1基本跳轉196
8.2.2條件跳轉197
8.2.3源碼解析198
8.3 Prompt 201
8.4 withRouter 203
8.5 matchPath 205
8.6實戰案例206
8.6.1路由動畫206
8.6.2 Prompt組件210
8.6.3 404頁面212
8.6.4不銷毀未命中路徑組件的擴展Switch 215
8.7小結218
參考文獻219

第9章進階實戰案例220
9.1路由組件的滾動恢復220
9.1.1 scrollRestoration 220
9.1.2容器元素滾動恢復221
9.1.3滾動管理者ScrollManager 221
9.1.4滾動恢復執行者ScrollElement 224
9.1.5多次嘗試機制227
9.2異步history方法229
9.2.1提升history方法229
9.2.2導航感知231
9.3為路由引入hash定位233
9.3.1頁面加載233
9.3.2異步數據加載235
9.4為組件引入路由生命週期237
9.4.1路由生命週期237
9.4.2實現路由生命週期高階組件241
9.5 React Router狀態同步Redux 246
9.5.1接入connected-react-router 246
9.5.2 connected-react-router原理分析249
9.6 React Router狀態同步Mobx 251
9.7路由與組件的結合實戰252
9.7.1路由結合Tabs組件252
9.7.2路由結合Modal組件256
9.7.3路由結合BreadCrumb組件257
9.8為history方法引入前置中間件260
9.8.1 Redux中間件260
9.8.2中間件定義261
9.8.3實現history中間件263
9.9組件路由化268
9.9.1為組件加入path屬性268
9.9.2為組件賦予路由269
9.10路由與頁簽機制274
9.10.1頁簽介紹274
9.10.2頁簽配置276
9.10.3頁簽實現277
9.11在React Hooks中使用路由282
9.11.1通過React Hooks獲得路由組件282
9.11.2實現useHookRoutes 284
9.12微服務路由286
9.12.1微服務介紹286
9.12.2實現示例287
9.13配置化路由擴展294
9.13.1配置化路由與react-router-config 294
9.13.2重新實現配置化路由298
9.14配置化路由綜合示例303
9.14.1路由配置304
9.14.2導航310
9.14.3使用頁簽組件318
9.14.4頁簽棧維護325
9.15小結335
參考文獻336
附錄A從React Router v3.x遷移到React Router v4.x及以上版本337