"《深入理解React Router：從原理到實踐》詳細地介紹了React Router的使用方式及運作原理。提供基礎場景的真實案例，幫助讀者學到React Router的使用方式。從基礎的URL、瀏覽器history API，到React Router的源碼實現，全方位介紹原理方法。既能幫助初學者快速上手，又能幫助有一定基礎的開發者深入理解React Router的設計實現。通讀全書，不僅能清楚如何在應用場景中使用React Router，更能深入理解React Router的等

●第1章 導航相關JavaScript前驅知識 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 在b素存在的情況下添加和修改瀏覽器記錄 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

本書從基礎內容出發，詳細梳理了瀏覽器的基礎導航能力、history庫的使用及原理，以及React Hooks等基礎知識，幫助讀者學習並掌握React Router的前驅知識。同時，本書從React Router的發展歷程、技術演變出發，介紹了React Router的設計思路，並通過路由器、路由端口、導航三要素，引出React Router的基本使用方法，並對源碼進行了全面解析。此外，本書各章使用React Hooks穿插了30餘個案例，在兼顧實用性、可擴展性的同時，為讀者學習與理解React Router提供了全面豐富的素材。通過閱讀本書，讀者不僅可以融會貫通地掌握React Router，而且能提升對前端路由的認識，並掌握前端領域路由的設計思路與方法。本書適合有JavaScript或TypeScript基礎，想要學習使用React Router，或對React Router實現原理和工等

李楊韜 著