在 React 前端项目中,涉及到前端路由,想必大家都用过了 react-router-dom[1] 这个包,因为常用,所以有必要弄清楚其中的实现细节,对前端路由会有一个更深入的认识,另外也有助于提升工作效率。
此文不赘述使用方法,相关内容可以参考tutorial 官方的指导手册[2]。
客户端里的路由模式
相较于“服务端路由”每次从服务端获取 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[3]
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 版本,直接冲