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

第1章 導(dǎo)航相關(guān)JavaScript前驅(qū)知識\t1
1．1 URI和URL\t1
1．1．1 URI和URL簡介\t1
1．1．2 瀏覽器URI編碼\t3
1．2 瀏覽器記錄\t4
1．2．1 history．pushState\t5
1．2．2 history．replaceState\t9
1．2．3 通過相對路徑添加和修改瀏覽器記錄\t11
1．2．4 在base元素存在的情況下添加和修改瀏覽器記錄\t14
1．3 在瀏覽器中跳轉(zhuǎn)\t15
1．3．1 window．history．go\t15
1．3．2 window．history．forward\t16
1．3．3 window．history．back\t16
1．3．4 window．location．href\t17
1．3．5 window．location．hash\t17
1．3．6 window．location．replace\t18
1．4 瀏覽器相關(guān)事件介紹\t19
1．4．1 popstate事件\t19
1．4．2 hashchange事件\t21
1．4．3 手動觸發(fā)事件\t22
1．5 小結(jié)\t24
參考文獻(xiàn)\t24
第2章 history庫詳解\t26
2．1 history庫概述\t26
2．2 browserHistory\t32
2．2．1 創(chuàng)建browserHistory\t32
2．2．2 history導(dǎo)航\t33
2．2．3 history監(jiān)聽\t37
2．3 hashHisotry\t38
2．3．1 創(chuàng)建hashHisotry\t38
2．3．2 history導(dǎo)航\t40
2．3．3 history監(jiān)聽\t45
2．3．4 history．createHref\t47
2．4 memoryHistory\t49
2．4．1 創(chuàng)建memoryHistory\t49
2．4．2 history導(dǎo)航\t50
2．4．3 history監(jiān)聽\t53
2．5 history庫原理\t54
2．5．1 history庫的運(yùn)行流程\t54
2．5．2 history模擬歷史棧\t55
2．5．3 browserHistory事件處理\t57
2．5．4 hashHistory事件處理\t58
2．5．5 history．block原理解析\t60
2．6 history庫限制\t63
2．6．1 history．block的使用限制\t63
2．6．2 decodeURI解碼問題\t64
2．7 使用history替換頁面search和hash示例\t70
2．8 小結(jié)\t71
參考文獻(xiàn)\t71
第3章 React相關(guān)知識\t72
3．1 Context\t72
3．2 Hooks\t76
3．2．1 useState\t76
3．2．2 useEffect\t78
3．2．3 useLayoutEffect\t84
3．2．4 useRef\t86
3．2．5 useMemo\t87
3．2．6 useContext\t89
3．2．7 自定義Hook\t89
3．3 Refs\t90
3．3．1 createRef\t90
3．3．2 forwardRef\t91
3．4 Memo\t91
3．5 小結(jié)\t94
參考文獻(xiàn)\t94
第4章 認(rèn)識React Router\t95
4．1 React Router是什么\t95
4．2 React Router版本的演進(jìn)\t96
4．3 靜態(tài)路由與動態(tài)路由\t97
4．4 使用React Router實現(xiàn)一個工程應(yīng)用\t98
4．5 小結(jié)\t107
第5章 Router\t109
5．1 Router是什么\t109
5．2 Router源碼解析\t110
5．2．1 history監(jiān)聽\t110
5．2．2 提供初始Context\t110
5．2．3 提前監(jiān)聽\t113
5．3 BrowserRouter\t113
5．4 HashRouter\t114
5．5 NativeRouter\t115
5．6 StaticRouter\t116
5．7 相關(guān)Hooks\t121
5．7．1 useRouterContext\t122
5．7．2 useHistory\t122
5．7．3 useLocation\t123
5．8 小結(jié)\t124
參考文獻(xiàn)\t124
第6章 Route\t125
6．1 Route是什么\t125
6．2 Route的兩個基本要素\t125
6．2．1 Route的第一個要素：path\t126
6．2．2 Route的第二個要素：組件渲染方式\t134
6．3 Route傳入組件的3個參數(shù)\t138
6．3．1 match\t138
6．3．2 location\t140
6．3．3 history\t141
6．4 Route的其他配置\t142
6．4．1 location\t142
6．4．2 exact\t142
6．4．3 strict\t143
6．4．4 sensitive\t144
6．5 Route 源碼解析\t144
6．5．1 上下文的更新\t144
6．5．2 運(yùn)行流程\t147
6．6 相關(guān)Hooks\t149
6．6．1 useRouteMatch\t149
6．6．2 useParams\t149
6．7 Route實戰(zhàn)案例\t150
6．7．1 嵌套Route\t150
6．7．2 相對路徑Route\t152
6．7．3 重定向Route\t153
6．7．4 默認(rèn)子組件Route\t156
6．7．5 緩存Route\t158
6．7．6 Route渲染組件的可訪問性支持\t165
6．7．7 query及命名參數(shù)\t166
6．7．8 Route中的代碼拆分\t168
6．8 小結(jié)\t169
參考文獻(xiàn)\t170
第7章 Link\t171
7．1 Link介紹\t171
7．1．1 Link的定義及屬性\t171
7．1．2 Link源碼解析\t174
7．2 NavLink\t176
7．2．1 帶激活態(tài)的Link\t176
7．2．2 轉(zhuǎn)義特殊字符\t178
7．2．3 NavLink源碼解析\t178
7．3 DeepLinking\t181
7．4 BackButton\t182
7．5 導(dǎo)航實戰(zhàn)案例\t183
7．5．1 為導(dǎo)航組件擴(kuò)展路由匹配\t183
7．5．2 相對上下文路徑導(dǎo)航組件\t184
7．5．3 相對上下文路徑的導(dǎo)航方法\t185
7．5．4 為導(dǎo)航組件擴(kuò)展search和hash支持\t188
7．6 小結(jié)\t191
參考文獻(xiàn)\t191
第8章 其他路由組件及方法\t192
8．1 Switch\t192
8．1．1 Switch簡介\t192
8．1．2 Switch源碼解析\t194
8．2 Redirect\t196
8．2．1 基本跳轉(zhuǎn)\t196
8．2．2 條件跳轉(zhuǎn)\t197
8．2．3 源碼解析\t198
8．3 Prompt\t201
8．4 withRouter\t203
8．5 matchPath\t205
8．6 實戰(zhàn)案例\t206
8．6．1 路由動畫\t206
8．6．2 Prompt組件\t210
8．6．3 404頁面\t212
8．6．4 不銷毀未命中路徑組件的擴(kuò)展Switch\t215
8．7 小結(jié)\t218
參考文獻(xiàn)\t219
第9章 進(jìn)階實戰(zhàn)案例\t220
9．1 路由組件的滾動恢復(fù)\t220
9．1．1 scrollRestoration\t220
9．1．2 容器元素滾動恢復(fù)\t221
9．1．3 滾動管理者ScrollManager\t221
9．1．4 滾動恢復(fù)執(zhí)行者ScrollElement\t224
9．1．5 多次嘗試機(jī)制\t227
9．2 異步history方法\t229
9．2．1 提升history方法\t229
9．2．2 導(dǎo)航感知\t231
9．3 為路由引入hash定位\t233
9．3．1 頁面加載\t233
9．3．2 異步數(shù)據(jù)加載\t235
9．4 為組件引入路由生命周期\t237
9．4．1 路由生命周期\t237
9．4．2 實現(xiàn)路由生命周期高階組件\t241
9．5 React Router狀態(tài)同步Redux\t246
9．5．1 接入connected-react-router\t246
9．5．2 connected-react-router原理分析\t249
9．6 React Router狀態(tài)同步Mobx\t251
9．7 路由與組件的結(jié)合實戰(zhàn)\t252
9．7．1 路由結(jié)合Tabs組件\t252
9．7．2 路由結(jié)合Modal組件\t256
9．7．3 路由結(jié)合BreadCrumb組件\t257
9．8 為history方法引入前置中間件\t260
9．8．1 Redux中間件\t260
9．8．2 中間件定義\t261
9．8．3 實現(xiàn)history中間件\t263
9．9 組件路由化\t268
9．9．1 為組件加入path屬性\t268
9．9．2 為組件賦予路由\t269
9．10 路由與頁簽機(jī)制\t274
9．10．1 頁簽介紹\t274
9．10．2 頁簽配置\t276
9．10．3 頁簽實現(xiàn)\t277
9．11 在React Hooks中使用路由\t282
9．11．1 通過React Hooks獲得路由組件\t282
9．11．2 實現(xiàn)useHookRoutes\t284
9．12 微服務(wù)路由\t286
9．12．1 微服務(wù)介紹\t286
9．12．2 實現(xiàn)示例\t287
9．13 配置化路由擴(kuò)展\t294
9．13．1 配置化路由與react-router-config\t294
9．13．2 重新實現(xiàn)配置化路由\t298
9．14 配置化路由綜合示例\t303
9．14．1 路由配置\t304
9．14．2 導(dǎo)航\t310
9．14．3 使用頁簽組件\t318
9．14．4 頁簽棧維護(hù)\t325
9．15 小結(jié)\t335
參考文獻(xiàn)\t336
附錄A 從React Router v3．x遷移到React Router v4．x及以上版本\t337