深入理解React Router：从原理到实践

本书从基础内容出发，详细梳理了浏览器的基础导航能力、history库的使用及原理，以及React Hooks等基础知识，帮助读者学习并掌握React Router的前驱知识。同时，本书从React Router的发展历程、技术演变出发，介绍了React Router的设计思路，并通过路由器、路由端口、导航三要素，引出React Router的基本使用方法，并对源码进行了全面解析。此外，本书各章使用React Hooks穿插了30余个案例，在兼顾实用性、可扩展性的同时，为读者学习与理解React Router提供了全面丰富的素材。通过阅读本书，读者不仅可以融会贯通地掌握React Router，而且能提升对前端路由的认识，并掌握前端领域路由的设计思路与方法。本书适合有JavaScript或TypeScript基础，想要学习使用React Router，或对React Router实现原理和工程实践感兴趣的开发者阅读。

在我刚进入前端开发行业的时候，业界普遍采用多页面应用的模式，前端页面依附于服务端应用平台并作为展示模板，由服务端响应页面间的跳转请求。随着前端技术的飞速发展，AJAX逐渐成为流行的前后端通信技术，使得页面不再需要在页面加载或表单提交时同步地向服务端提交或获取数据，而是异步地向服务端提交或获取数据。从此，前后端分离时代来临。
前后端分离时代的来临，使得前后端分工逐渐趋于独立，前端页面不再依附于服务端，页面直接部署于CDN中。页面元素通过组件搭建而成，并直接在前端进行状态管理。原有的多页面应用也将页面视为组件，开始出现单页面应用（Single Page Application，SPA）。
优秀的单页面应用为用户提供了近似本地软件的体验，早期最有名的便是Gmail。Gmail率先为业界展示了单页面应用的魅力，用户在使用Gmail时，与使用本地邮件客户端并无差别，用户无须等待页面刷新。
单页面应用要实现加载后无刷新的体验，除了需要采用AJAX来代替表单提交，还离不开前端路由器。在浏览器环境当中，用户会对页面进行后退、前进、保存书签、分享URL等操作，这些操作原本是浏览器向服务端发送请求，由服务端路由进行响应支持的。而在前后端分离、单页面的架构下，对用户此类行为的处理自然需要交到前端，于是业界很快开始抽象出前端路由。
React作为当前业界流行的三大前端UI框架之一，其配套的前端路由React Router使用率也极高。截至2019年年末，react-router包每周下载量超过250万次。前端工程师很有必要了解路由的使用方式和运作原理，如果使用的是React，则很有必要了解React Router。
本书详细地介绍了React Router的历史演变、使用方式及运作原理。
在使用方式上，书中提供了基础场景的示例，读者可以学到React Router的使用方式。在后面的进阶实战示例章节中，读者也可以学到在工程实践中如何运用前端路由。全书还包括对React当前最新的React Hooks API的讲解。
在运作原理相关的章节中，从最基础的URL、浏览器history API，到React Router的源码实现，都有详细的讲解，这对希望了解前端路由实现原理的工程师来说会有不少的帮助。
本书基本囊括了所有与React Router相关的技术知识和细节，推荐想深入了解现代前端路由的工程师阅读。

叶俊星（Jasin Yip）
全栈工程师，先后就职于美团网、阿里巴巴

React Router自2014年2月发布第一个版本，到2019年10月发布v5.1.2，已经经历了大大小小130多个版本的迭代演进。从2020年1月的GitHub数据来看，有超过80万个仓库的依赖包含了React Router，同时NPM上依赖React Router的react-router包数量已超过5200个。2019年，在NPM源中，React Router的react-router包周平均下载量超过250万次。以上数据足以说明，React Router几乎成了React生态中路由的标准解决方案。
鉴于目前相关系统介绍React Router的技术图书比较匮乏，特编写此书以飨读者。本书基于React开发框架，在提供基础知识的同时，将基于React Router v5.1.2进行介绍。以下是各章节内容。
第1章，主要介绍与导航相关的JavaScript前驱知识，为路由框架学习提供基础知识储备。
第2章，讲解history库的基础知识及原理，并介绍与history库相关的限制及注意事项，帮助读者学习导航基础。
第3章，介绍React v16.3及之后版本的一些新特性，包括Context、Hooks等，旨在帮助读者学习与理解Router设计中的相关知识。
第4章，首先对React Router进行基本的介绍，并对React Router的发展历程进行梳理，分析React Router的版本演进过程，使读者对React Router有一个全方位的了解。之后，从一个简单的工程实例出发，使读者了解React Router的简单使用方法，并引出React Router三要素，为后面章节做好铺垫。
第 5 章，全面介绍路由系统的第一个基本要素——Router。在对不同种类的Router进行介绍的同时，通过源码介绍Router的基本原理，并介绍Router相关的Hooks。学完本章，将为理解整个路由系统的原理打好重要的基础。
第6章，介绍路由系统的第二个要素——Route。首先介绍Route中的两个基本元素：路径与渲染，并介绍Route为组件提供的属性与Route的相关配置。在通过Route源码巩固后，通过相关Hooks与多个实战案例，为读者提供丰富的实战经验总结。
第 7 章，介绍路由系统中的导航，包括基本导航组件、带激活态的导航组件等。在介绍基础使用方法的同时，也对源码实现进行分析，帮助读者深入了解导航组件的设计，并通过实战案例强化读者对导航的理解。
第 8 章，介绍帮助组件及方法，恰当地使用相关组件或方法，可以提升开发效率。本章在介绍各组件与方法的基础用法时，也穿插了各组件的源码解析，并通过实战案例，帮助读者深入学习和掌握各组件的设计思路及实际用法，提升读者在实战中的开发效率。
第 9 章，在学好以上各章知识的基础上，读者能清晰地看到路由系统的全貌，且对React Router有全面的掌握。以此为基础，本章提供多个进阶案例，更为读者提供组件设计的思路和方法。通过本章系统性的学习，读者可全方位地学习与理解前端路由，并提升对前端路由的整体认识，掌握前端领域路由的设计思路与方法。
本书既能帮助初学者快速上手，又能帮助有一定基础的开发者深入理解React Router的设计实现，从而加深对路由系统的理解。读完本书，读者不仅能清楚各场景是怎么使用React Router的，更能深入理解React Router的设计原理，对React Router做出定制化的改造，以面对日渐复杂的页面结构与需求。
阅读本书需要有一定的React、TypeScript或JavaScript基础。本书适合有JavaScript或TypeScript基础，想要学习使用React Router，或对React Router实现原理和工程实践感兴趣的开发者阅读。
示例代码：
读者可以从GitHub上获取本书的源码：https://github.com/klfzlyt/react-router-tutorial。
本书的完成离不开在各个方面给予我支持和帮助的人，感谢我的同事曾静益、李宏，他们给本书提出了很多宝贵的意见；感谢电子工业出版社博文视点的编辑宋亚东，他在编辑和审校本书期间提出了宝贵的意见；最后，感谢我的家人、朋友、同学在我创作本书期间给予的宽容和支持。
如果您在阅读本书的过程中有任何问题，可以发送邮件到作者的邮箱反馈：klfzlyt@outlook. com。由于作者水平有限，不足之处在所难免，请广大读者批评指正。

李杨韬　　

第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  在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