【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 等。

相关推荐
我是小路路呀36 分钟前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
虾球xz38 分钟前
游戏引擎学习第201天
前端·学习·游戏引擎
我自纵横20231 小时前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li1 小时前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
excel1 小时前
webpack 核心编译器 十五 节
前端
excel1 小时前
webpack 核心编译器 十六 节
前端
雪落满地香3 小时前
css:圆角边框渐变色
前端·css
风无雨5 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!5 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
安分小尧10 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架