前言 Preface

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 Routerv5.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。由于作者水平有限，不足之处在所难免，请广大读者批评指正。

李杨韬