React@16.x(45)路由v5.x(10)源码(2)- history

目录

  • 1,作用
    • 1.1,createBrowserHistory
    • 1.2,createHashHistory
    • 1.3,createMemoryHistory
  • 2,history 对象的属性
    • 2.1,action
    • 2.2,push / replace / go / goBack / goForward
    • 2.3,location
    • 2.4,listen
    • 2.5,block / getUserConfirmation
    • 2.5,createHref

1,作用

react-router 在控制和监听地址变化时,使用的是第3方库 history,其中,

  • react-router v5.x,使用的 history v4.x版本
  • react-router v6.0.0,使用的 history v5.0版本

所以下面介绍的是 history v4.10.1 的 API,和 v5.0 是有差异的,注意区分。

另外,该对象不是 window.history,而是一个抽离的对象,它提供统一的 API 接口,封装了具体的实现。

  • createBrowserHistory,创建控制 浏览器真实地址history对象;
  • createHashHistory 创建控制 浏览器 hashhistory对象;
  • createMemoryHistory 创建控制 内存中地址栈history对象(一般用于没有地址栏的环境,比如 APP 中)。

它们3个共同的特点:

  • 维护了一个地址栈
  • 返回的 history 对象结构完全一致。

v5 版本,在使用下面3个方法时,已经没有配置项了。

1.1,createBrowserHistory

配置项:

  • basename:设置根路径。
  • forceRefresh:地址改变时是否强制刷新页面。
  • keyLength:location对象使用的 key 值长度。
    • 地址栈中记录的并非字符串,而是一个 location 对象。
  • getUserConfirmation:一个函数,该函数当调用 history.block()后,发生页面跳转时运行。

1.2,createHashHistory

配置项:

  • hashType#号后给定的路径格式(注意 # 后的内容)
    • hashbang:被chrome弃用,#!路径
    • noslash#a/b/c
    • slash#/a/b/c

1.3,createMemoryHistory

略。

2,history 对象的属性

官方API介绍

2.1,action

当前地址栈,最后一次操作的类型。(该属性没什么用)

  • 如果是通过 createXXXHistory 函数新创建的 history 对象,action 固定为 POP
  • 如果调用了 history.push()action 变为 PUSH;同理调用 history.replace(),会变为 REPLACE
  • 其他的 gogoForward 等方法,不会改变 action

只要是新创建historyaction 都是 POP
比如通过已创建的 history 执行了 push 操作,action 变为 PUSH。此时再次创建新的 history 对象,action 又会变为 POP

2.2,push / replace / go / goBack / goForward

这些顾名思义,不多赘述。

2.3,location

表示当前地址中的信息,包括的属性(和 react-router 中的一样):

{"pathname": "/","search": "","hash": "","state": null,"key": "xfadfd"
}

key 属性,是为了区分2个相同的地址。因为在地址栈中,存储的是 location 对象,通过 key 做唯一性判断。

2.4,listen

在之前的文章 React 路由守卫 中已经介绍了使用方式。
react-router 实现无刷新跳转的关键。

用于监听地址栈指针的变化。该函数接收一个函数作为参数,该参数表示地址变化后要做的事情

参数函数接收两个参数:

  • location:记录了新的地址信息;
  • action:进入新地址的方式:
    • POP:调用 gogoBackgoForward、用户点击浏览器后退按钮。
    • PUSH / REPLACE

该函数有一个返回值,返回的是一个函数,用于取消监听。

2.5,block / getUserConfirmation

同样的,在之前的文章 React 路由守卫 中已经介绍了使用方式。

block 用于设置一个阻塞,当页面发生跳转时,会将指定的消息传递到getUserConfirmation,并调用 getUserConfirmation 函数。

  • block 函数接收一个字符串作为参数,表示消息内容。也可以接收一个函数作为参数,函数的返回值是消息内容。
    该函数返回一个取消函数,调用取消函数可以解除阻塞。

2.5,createHref

返回一个可以直接作为 <a href=""> 的字符串,其实就是 bashname + url

const href= history.createHref(location);

以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/39453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络配线架的隐藏功能

网络布线是确保现代信息社会高效运转的关键技术之一。在这一领域&#xff0c;网络配线架扮演着至关重要 的角色。它不仅仅是一个简单的物理连接点&#xff0c;更拥有许多隐藏功能&#xff0c;这些功能极大地提升了网络的 效率、稳定性和可管理性。 1、集中管理 网络配线架提…

【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 同步与通信篇 -- 消息队列和邮箱处理 --(四)

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…

经典FC游戏web模拟器--EmulatorJS

简介 EmulatorJS是一个基于JavaScript和Webassembly技术的虚拟环境的实现&#xff0c;可以在网页中运行各种经典FC游戏系统&#xff0c;支持任天堂、世嘉、雅达利等经典红白机。EmulatorJS的诞生使得诸如超级玛丽、坦克大战、魂斗罗等经典FC游戏能够以一种全新的方式回归。本文…

SAP MM模块的ATP检查

前面几篇文章都演示和说明ATP的一些设置和操作&#xff0c;通常情况下ATP的检查PP模块&#xff0c;SD模块用的相对来说是比较多的&#xff0c;但是实际上MM模块也会遵循ATP的可用性的检查规则。 当我们在做311、301等移动类型时&#xff0c;系统会根据相应的可用性检查规则&am…

Linux常用指令汇总

Linux常用指令汇总 Cfilt 功能&#xff1a;解析C程序中被修饰的符号&#xff0c;比如变量与函数名称。 示例&#xff1a; 解析编译器 g 修饰的函数名称。 cfilt -s gnu-v3 _Z5printRKSs print(std::basic_string<char, std::char_traits<char>, std::allocator<…

Django 多对多关系

多对多关系作用 Django 中&#xff0c;多对多关系模型的作用主要是为了表示两个模型之间的多对多关系。具体来说&#xff0c;多对多关系允许一个模型的实例与另一个模型的多个实例相关联&#xff0c;反之亦然。这在很多实际应用场景中非常有用&#xff0c;比如&#xff1a; 博…

【每日一个Git命令: cherry-pick】

git cherry-pick 命令的作用是将指定的提交&#xff08;commit&#xff09;应用到其他分支上。这个命令允许你选择一个或多个已有的提交&#xff0c;并将它们作为新的提交引入到当前分支中。 这个过程不会改变项目的历史记录&#xff0c;因为它实际上是创建了这些提交的副本。…

BMA530 运动传感器

型号简介 BMA530是博世&#xff08;bosch-sensortec&#xff09;的一款运动传感器。时尚简约的可穿戴设备为功能强大的组件提供了很小的空间。具有先进功能集的下一代加速度计是世界上最小的加速度传感器&#xff08;1.2 x 0.8 x 0.55 mm&#xff09;。它专为紧凑型设备而设计&…

24/07/02数据结构(1.1201)算法效率顺序表

数据结构基本内容:1.时间复杂度 空间复杂度2.顺序表链表3.栈 队列4.二叉树5.排序 数据结构是存储,组织数据的方式.指相互之间存在一种或多种特定关系的数据元素的集合 算法是定义良好的计算过程.取一个或一组值为输入并产生一个或一组值为输出. 需要知道虽然选择题有20-30个…

Leetcode1114 交替打印 FooBar及其测试

题目描述 相关标签 相关企业 给你一个类&#xff1a; class FooBar { public void foo() { for (int i 0; i < n; i) { print(“foo”); } } public void bar() { for (int i 0; i < n; i) { print(“bar”); } } } 两个不同的线程将会共用一个 FooBar 实例&#xf…

python自动化运维--DNS处理模块dnspython

1.dnspython介绍 dnspython是Pyhton实现的一个DNS工具包&#xff0c;他几乎支持所有的记录类型&#xff0c;可以用于查询、传输并动态更新ZONE信息&#xff0c;同事支持TSIG&#xff08;事物签名&#xff09;验证消息和EDNS0&#xff08;扩展DNS&#xff09;。在系统管理方面&a…

Linux高并发服务器开发(九)Tcp状态转移和IO多路复用

文章目录 0 包裹函数1 多进程服务器流程代码 2 多线程服务器3 TCP状态转移半关闭心跳包 4 端口复用5 IO多路复用技术高并发服务器 6 select代码总结 7 POLLAPI代码poll相对select的优缺点 8 epoll&#xff08;重点&#xff09;API监听管道代码EPOLL 高并发服务器 9 Epoll的两种…

Iot解决方案开发的体系结构模式和技术

前言 Foreword 计算机技术起源于20世纪40年代&#xff0c;最初专注于数学问题的基本原理&#xff1b;到了60年代和70年代&#xff0c;它以符号系统为中心&#xff0c;该领域首先开始面临复杂性问题&#xff1b;到80年代&#xff0c;随着个人计算的兴起和人机交互的问题&#x…

【进阶篇】Java 项目中对使用递归的理解分享

前言 笔者在最近的项目开发中&#xff0c;遇到了两个父子关系紧密相关的场景&#xff1a;评论树结构、部门树结构。具体的需求如&#xff1a;找出某条评论下的所有子评论id集合&#xff0c;找出某个部门下所有的子部门id集合。 在之前的项目开发经验中&#xff0c;递归使用得是…

centos7安装python3.10

文章目录 1. 安装依赖项2. 下载Python 3.10源码3. 解压源码并进入目录4. 配置安装选项5. 编译并安装Python6. 验证安装7.创建软连接8. 安装pip39. 换源 1. 安装依赖项 sudo yum groupinstall -y "Development Tools" sudo yum install -y openssl-devel bzip2-devel…

Eureka的自扩展之道:服务自动扩展的秘诀

&#x1f31f; Eureka的自扩展之道&#xff1a;服务自动扩展的秘诀 在微服务架构中&#xff0c;服务的自动扩展是实现高可用性和弹性伸缩的关键。Eureka作为Netflix开源的服务发现框架&#xff0c;提供了一套机制来支持服务的自动扩展。本文将详细介绍Eureka如何实现服务的自动…

【LeetCode】十、二分查找法:寻找峰值 + 二维矩阵的搜索

文章目录 1、二分查找法 Binary Search2、leetcode704&#xff1a;二分查找3、leetcode35&#xff1a;搜索插入位置4、leetcode162&#xff1a;寻找峰值5、leetcode74&#xff1a;搜索二维矩阵 1、二分查找法 Binary Search 找一个数&#xff0c;有序的情况下&#xff0c;直接…

第4章:Electron主窗口与子窗口管理

4.1 创建主窗口 主窗口是 Electron 应用启动后显示的第一个窗口&#xff0c;通常用来承载应用的主界面。我们使用 BrowserWindow 类来创建主窗口。 4.1.1 创建主窗口的基础代码 // 引入 Electron 模块和 Node.js 的 path 模块 const { app, BrowserWindow } require(electr…

【动态规划 前缀和】2478. 完美分割的方案数

本文涉及知识点 划分型dp 动态规划汇总 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LeetCode 2478. 完美分割的方案数 给你一个字符串 s &#xff0c;每个字符是数字 ‘1’ 到 ‘9’ &#xff0c;再给你两个整数 k 和 minLength 。 如…

【C++ Primer Plus学习记录】指针和const

可以用两种不同的方式将const关键字用于指针。第一种方法是让指针指向一个常量对象&#xff0c;这样就可以防止使用该指针来修改所指向的值&#xff0c;第二种方法是将指针本身声明为常量&#xff0c;这样可以防止改变指针指向的位置。 首先&#xff0c;声明一个指向常量的指针…