React 路由跳转

1. push 与 replace 模式

默认情况下,开启的是 push 模式,也就是说,每次点击跳转,都会向栈中压入一个新的地址,在点击返回时,可以返回到上一个打开的地址,

就像上图一样,我们每次返回都会返回到上一次点击的地址中

当我们在读消息的时候,有时候我们可能会不喜欢这种繁琐的跳转,我们可以开启 replace 模式,这种模式与 push 模式不同,它会将当前地址替换成点击的地址,也就是替换了新的栈顶

我们只需要在需要开启的链接上加上 replace 即可

<Link replace to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>

 

2. 编程式路由导航

我们可以采用绑定事件的方式实现路由的跳转,我们在按钮上绑定一个 onClick 事件,当事件触发时,我们执行一个回调 replaceShow

这个函数接收两个参数,用来仿制默认的跳转方式,第一个是点击的 id 第二个是标题

我们在回调中,调用 this.props.location 对象下的 replace 方法

replaceShow = (id, title) => {this.props.history.replace(`/home/message/detail/${id}/${title}`)
}

同时我们可以借助 this.props.history 身上的 API 实现路由的跳转,例如 go、goBack 、goForward

3. withRouter

当我们需要在页面内部添加回退前进等按钮时,由于这些组件我们一般通过一般组件的方式去编写,因此我们会遇到一个问题,无法获得 history 对象,这正是因为我们采用的是一般组件造成的。

只有路由组件才能获取到 history 对象

因此我们需要如何解决这个问题呢

我们可以利用 react-router-dom 对象下的 withRouter 函数来对我们导出的 Header 组件进行包装,这样我们就能获得一个拥有 history 对象的一般组件

我们需要对哪个组件包装就在哪个组件下引入

// Header/index.jsx
import { withRouter } from 'react-router-dom'
// 在最后导出对象时,用 `withRouter` 函数对 index 进行包装
export default withRouter(index);

这样就能让一般组件获得路由组件所特有的 API

4. BrowserRouter 和 HashRouter 的区别

它们的底层实现原理不一样

对于 BrowserRouter 来说它使用的是 React 为它封装的 history API ,这里的 history 和浏览器中的 history 有所不同噢!通过操作这些 API 来实现路由的保存等操作,但是这些 API 是 H5 中提出的,因此不兼容 IE9 以下版本。

对于 HashRouter 而言,它实现的原理是通过 URL 的哈希值,但是这句话我不是很理解,用一个简单的解释就是

我们可以理解为是锚点跳转,因为锚点跳转会保存历史记录,从而让 HashRouter 有了相关的前进后退操作,HashRouter 不会将 # 符号后面的内容请求。兼容性更好!

地址栏的表现形式不一样

  • HashRouter 的路径中包含 # ,例如 localhost:3000/#/demo/test

刷新后路由 state 参数改变

  • 在BrowserRouter 中,state 保存在history 对象中,刷新不会丢失
  • HashRouter 则刷新会丢失 state

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

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

相关文章

ARM AArch64的TrustZone架构详解(下)

目录 五、软件架构 5.1 顶层软件架构 5.2 信任消息(message) 5.3 调度 5.4 OPTEE

Windows下安装Oracle19C

官网下载oracle19c 以及客户端 官网地址&#xff1a;Software Download | Oracle 这个是要登录账号的,没有的可以注册,登录上 这个时候在点开这个官网:Database Software Downloads | Oracle 往下面滑 点了之后有个界面注意事项勾上,点下载,你就会下载: 安装oracle19c 解压安…

入门级:用devEco Studio创建一个鸿蒙APP

文章概叙 本文主要讲的是如何在鸿蒙的开发工具devEco Studio新建一个项目&#xff0c;全文很水&#xff0c;只适合新手!! 开始贴图 假设当前你已经下载好了devEco Studio,但是还没正式开始安装&#xff0c;此时你点击安装包&#xff0c;你会发下如下页面&#xff0c;只需要点…

【Linux系统编程】【Google面试题改编】线程之间的同步与协调 Linux文件操作

编写程序&#xff0c;有四个线程1、2、3、4 线程1的功能就是输1,线程2的功能就是输出2,以此类推……现在有四个文件ABCD初始都为空 现要让四个文件呈如下格式&#xff1a; A: 1 22 333 4444 1 22 333 4444… B: 22 333 4444 1 22 333 4444 1… C: 333 4444 1 22 333 4444 1 2…

搭建react+ant design pro+umi 项目框架

一、 写本文的原因 我搭建reactantdumi这个框架的原始资料主要是来源于&#xff08;ReactUmi4从零快速搭建中后台系统保姆级记录教程&#xff08;一、项目创建及初始化&#xff09;&#xff09; 而我写这篇文章的本意就是用来记录我用搭建时候的步骤汇总。 二、 npm和node版…

云卷云舒:面向业务的智能运维(上)

1、BAIOPS-业务智能运维 智能运维&#xff08;AIOps-Algorithmic IT Operations基于算法的IT运维&#xff09;是人工智能技术在IT运维领域的运用&#xff0c;引用Gartner 的报告的一段话“到2020年&#xff0c;将近50%的企业将会在他们的业务和IT运维方面采用AIOps&#xff0c…

GBASE南大通用集群负载均衡

如果我们需要将连接请求分摊到集群的每个节点上时&#xff0c;可以使用集群负载均衡功能&#xff08;该功能需要 GBASE南大通用 ADO.NET 8.3.81.53 及以上版本&#xff09;。集群负载均衡 功能与集群高可用功能都属于客户端负载均衡解决方案。使用GBASE南大通用此功能时&#…

Nginx快速入门:实现企业安全防护|nginx部署https,ssl证书(七)

0. 引言 之前我们讲到nginx的一大核心作用就是实现企业安全防护&#xff0c;而实现安全防护的原理就是通过部署https证书&#xff0c;以此实现参数加密访问&#xff0c;从而加强企业网站的安全能力。 nginx作为各类服务的统一入口&#xff0c;只需要在入口处部署一个证书&…

doris基本操作,03-导入数据-Broker Load

简述 Broker load 是异步导入方式&#xff0c;支持的数据源取决于 Broker 进程支持的数据源。 因为 Doris 表里的数据是有序的&#xff0c;所以 Broker load 在导入数据的时是要利用doris 集群资源对数据进行排序&#xff0c;相对于 Spark load 来完成海量历史数据迁移&#…

解决Maven找不到依赖的问题

如果经过Reload Maven项目&#xff0c;清除Idea缓存&#xff0c;甚至重启Idea等方法都解决不了Dependency xxx not found的问题&#xff0c;不妨试试手动安装。 1. 进入maven仓库&#xff0c;搜索自己需要的对应版本的依赖。 2. 点击下图红框jar图标下载对应的jar包&#xff0c…

DP进阶之路——爬楼梯

爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&am…

【K8S基础】-k8s的核心概念控制器和调度器

Kubernetes是一个开源的容器编排平台&#xff0c;旨在简化和自动化容器化应用程序的部署、扩展和管理。它提供了一个强大的基础设施来管理容器化应用程序的生命周期&#xff0c;并确保它们在整个集群中高效运行。 Kubernetes的核心概念包括集群、节点、Pod、控制器、调度器等。…

求职小程序列表基础配置-移动端通用列表模块配置教程(1)

求职小程序列表基础配置-移动端通用列表模块配置教程(1) 移动端通用列表页开发指南 准备工作 注册多八多AIIDE账号: 访问多八多AIIDE官网并注册新账号。完成邮箱和手机号的验证。 创建移动应用: 登录后&#xff0c;在工作台新建一个移动应用。填写应用名称&#xff0c;选择“…

lv13 环境搭建之内核编译 4

一、开发板运行Linux 1. 网线连接开发板和主机 2. ubuntu下拷贝uImage、exynos4412-fs4412.dtb两个文件到/tftpboot目录下cd ~/fs4412cp uImage exynos4412-fs4412.dtb /tftpboot 3. rootfs.tar.xz解压到/opt/4412sudo tar xvf rootfs.tar.xz -C /opt/4412sudo chmod 777 /opt…

软件测试面试八股文——基础篇

5&#xff09;错误推测法&#xff1a;是基于经验和直觉推测程序中所有可能存在的各种错误&#xff0c;从而有针对性的设计测试用例的方法 6&#xff09;正交实验法 7&#xff09;判定表法 8&#xff09;测试大纲法 3、提交缺陷的八大要素 1&#xff09;缺陷编号&#xff1a…

2023.12.24 关于 Redis 中 String 类型内部编码和应用场景

目录 String 类型内部编码 3 种内部编码方式 String 类型应用场景 Cache 缓存 键名命名规则 计数&#xff08;Counter&#xff09; 共享会话&#xff08;Session &#xff09; 手机验证码 总结 String 类型内部编码 3 种内部编码方式 int&#xff1a;用来表示 64 位 —…

智能优化算法应用:基于食肉植物算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于食肉植物算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于食肉植物算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.食肉植物算法4.实验参数设定5.算法结果6.…

详细学习Java注解Annotation、元注解(通俗易懂,一学就会)

概述 底层原理 自定义注解 示例代码&#xff1a; 1. 2.只有属性名为value的才可以&#xff0c;java对它进行了标识&#xff0c;如果是其他别名如value1是不行的 3.多个属性&#xff0c;必须用键值对形式&#xff0c;不能少写&#xff0c;也不能多写&#xff0c;除非有default修…

嵌入式中一文搞定C语言数据结构--跳表

大家好&#xff0c;今天分享一篇C语言数据结构相关的文章--跳表。 1. 什么是跳表 跳表是 链表 索引 的一种数据结构 &#xff0c;是以空间换取时间的方式&#xff0c;关于跳表参考: https://baike.baidu.com/item/跳表/22819833?fraladdin 2. 跳表概念 跳表在原有链表的基…

【算法】利用双指针法解决算法题(C++)

文章目录 1. 前言2. 双指针法引入283.移动零 3. 使用双指针法解决算法题1089.复写零202.快乐数11.盛最多水的容器[611.有效三角 形的个数](https://leetcode.cn/problems/valid-triangle-number/description/)LCR179.查找总价格为目标值的两个商品15.三数之和18.四数之和 1. 前…