作者：DYBOY
在 React 前端项目中，涉及到前端路由，想必大家都用过了 react-router-dom 这个包，因为常用，所以有必要弄清楚其中的实现细节，对前端路由会有一个更深入的认识，另外也有助于提升工作效率。
此文不赘述使用方法，相关内容可以参考tutorial 官方的指导手册。
客户端里的路由模式
相较于“服务端路由”每次从服务端获取 CSS、JS、HTML 资源，客户端路由即是在客户端内自行控制，与服务端解耦，页面数据异步获取，浏览器无刷新切换页面，能为用户提供更快的页面切换体验，同时也为前端 SPA 应用发展提供了基础。
在浏览器 Web 环境里有 “Hash” 和 “History” 两种客户端路由模式。
Hash 模式
Hash 模式点击会跳转定位到指定 DOM 位置，同时触发 hashchange 事件，支持在浏览器中操作前进后退，其本质还是在同一文档中操作，Server 端无感知前端路由变化。
Hash 值在 window.location.hash 中存储，因此 Hash 变化时，同时可看到浏览器的 window.location.pathname 不变。
History 模式
在 Window 对象中提供了 history 实例，同时可以通过 history 暴露的 API 操作路由历史堆栈。
也就是说，我们可以通过控制 history 对象来控制页面的路由跳转，浏览器不会刷新，但浏览器里的 URL 会变更，SEO 更友好。
History 的 API 具体用法可参阅：History API - MDN
React Router v6 的架构设计
react-router-dom 是一个封装浏览器客户端路由方案的优质工具模块，基于 React 的应用开发者，可借助其快速开发实现“客户端路由”，同时提升用户体验。
react-router-dom 作为一款优秀的前端模块，更新到了 V6 版本，全面拥抱 React hooks 功能设计，通过阅读其源码，了解其设计思想，相信可以给大家在 路由设计 和 Hooks 实践上带来一些收获。
文件结构
在项目管理上采用了基于 Yarn 的 Monorepo 方案：
项目设计
react-router-dom 是浏览器环境中的桥接层，react-router-native 则是 Hybrid 开发的桥接层，其核心实现都在 react-router 模块中，层层递进。
此外，react-router-dom-v5-compat 是用于 react-router-dom v5 版本兼容迁移到 v6 版本的处理方案，但个人更建议是直接使用/切换到 v6 版本，直接冲