【React篇】简述React-Router 的实现原理及工作方式

React Router 路由的基础实现原理分为两种,如果是切换 Hash 的方式,那么依靠浏览器 Hash 变化即可;如果是切换网址中的 Path,就要用到 HTML5 History API 中的 pushState、replaceState 等。在使用这个方式时,还需要在服务端完成 historyApiFallback 配置。

在 React Router 内部主要依靠 history 库完成,这是由 React Router 自己封装的库,为了实现跨平台运行的特性,内部提供两套基础 history,一套是直接使用浏览器的 History API,用于支持 react-router-dom;另一套是基于内存实现的版本,这是自己做的一个数组,用于支持 react-router-native。

React Router 的工作方式可以分为设计模式与关键模块两个部分。从设计模式的角度出发,在架构上通过 Monorepo 进行库的管理。Monorepo 具有团队间透明、迭代便利的优点。其次在整体的数据通信上使用了 Context API 完成上下文传递。

在关键模块上,主要分为三类组件:第一类是 Context 容器,比如 Router 与 MemoryRouter;第二类是消费者组件,用以匹配路由,主要有 Route、Redirect、Switch 等;第三类是与平台关联的功能组件,比如 Link、NavLink、DeepLinking 等。

相关推荐
雪隐6 分钟前
个人电脑玩AI-13让5060 Ti给你打工——我用 0.9B 小模型终结了"谁来记会议纪要"这个世纪难题
前端·人工智能·后端
橘子星9 分钟前
我一个前端切图仔,凭什么能在浏览器里跑大模型?
前端·javascript·前端框架
70asunflower14 分钟前
初学者理解 Web 工作原理(完全教程)
前端
爱勇宝17 分钟前
《道德经》第 7 章:真正厉害的领导者,不抢主角
前端·后端·程序员
观远数据18 分钟前
Excel到数据资产池:文件数据入湖的治理规范怎么建
前端·javascript·excel
CoderWeen19 分钟前
我写了个能一步步点着看的 Dijkstra 可视化项目(Vue3 + Leaflet + Generator)
前端·javascript·vue.js
两点王爷41 分钟前
一个快速加载面和多面数据的html测试页面(可以导出geojson数据文件)
前端·html·gis
热爱前端的小张42 分钟前
第四章 接口和类型兼容性
前端
hunterandroid43 分钟前
[鸿蒙从零到一] HarmonyOS 资源管理与多语言适配实战
前端
用户69371750013841 小时前
Claude Code终端日志Token占用实测:一个过滤器砍掉60%-90%
android·前端·后端