react.js的两种路由方式:HashRouter

2023-05-16

react.js路由-初步

前面我们已经了解了react.js其中一种路由方式。

这种方式是利用 html5的`window.history`,对浏览器历史记录的读取。
`history.back()` 和在浏览器点击后退按钮相同;
`history.forward()`和在浏览器中点击前进按钮相同。

另外h5时段开始支持`pushState()`和`replaceState()`方法,并且当回退/前进是会触发`onpopstate()`事件。
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate

这里写图片描述
从上面动图可以看出:当我们刷新浏览器的时候 就出问题了。

HashRouter

现在 我们来学习另外一种路由方式:hash路由
参考示例:
https://reacttraining.com/react-router/web/api/HashRouter

把BrowserRouter改成HashRouter,其实也很简单。
主要是引入的包不同:

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

#改为
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

就是把BrowserRouter改成HashRouter即可。

这里写图片描述
现在刷新浏览器就不会出错了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react.js的两种路由方式:HashRouter 的相关文章

  • okhttpUtil信任所有证书

    使用okhttp调用https信任所有证书工具类 请求示例 xff1a 结果 xff1a Caused by span class token operator span javax span class token punctuation

随机推荐

  • 从实际性能剖析,为什么MEMS激光雷达才是未来主流?

    车规级激光雷达的技术路线之争 xff0c 似乎已经逐渐明朗 高工智能汽车 注意到 xff0c 目前 xff0c 包括Innoviz以及国内一径科技 速腾聚创等越来越多的厂商先后推出了车规级MEMS激光雷达 另外 xff0c 需要特别注意的是
  • C++之STL

    定义 STL xff08 Standard Template Library xff09 xff0c 即标准模板库 xff0c 是一个具有工业强度的 xff0c 高效的C 43 43 程序库 它被容纳于C 43 43 标准程序库 xff08
  • C语言之strpbrk函数

    该函数的头文件为 include lt string h gt xff0c 其作用是比较字符串str1和str2中是否有相同的字符 xff0c 如果有 xff0c 则返回该字符在str1中的最先出现的位置的指针 其函数原型如下 xff1a
  • Vb.NET与VB6.0的区别

    Visual Basic NET是Microsoft Visual Studio NET套件中主要组成部分之一 NET版本的Visual Basic增加了更多特性 xff0c 而且演化为完全面向对象 xff08 就像C 43 43 xff0
  • STM32学习--GPIO(寄存器)

    提示 xff1a 文章写完后 xff0c 目录可以自动生成 xff0c 如何生成可参考右边的帮助文档 文章目录 一 GPIO是什么 xff1f 二 引脚GPIO的输入输入框图输入模式作用 GPIO的输入输入框图输入模式作用 GPIO特性GP
  • c#找到网站中的照片

    c 下载图片 一 过程截图 开始 xff1a 正在下载 下载结束 下载成功了 xff01 xff01 xff01 二 代码实例 代码如下 xff08 示例 xff09 xff1a public delegate span class tok
  • linux同时连接有线无线上网问题

    起因 xff1a linux同时连接有线和无线网时 xff0c 希望用有线连内网组网 xff0c 如OAI EPC组网 xff0c 用无线访问外网 xff0c 但是默认会优先用有线 解决 xff1a 所以设置限制 xff0c 只允许目标地址
  • WK2114(一个异步串口UART 扩展为4个串口UART)

    WK2114是UART接口的4通道UART器件 WK2114将一个标准3线异步串口 xff08 UART xff09 扩展成为4个增强 功能串口 xff08 UART xff09 主接口UART在数据传输时主接口的UART可以通过引脚配置为
  • sql解析:获取Select字段

    https blog csdn net github 26672553 article details 100048506 前面已经了解这个解析sql的第三方库 继续深入学习 比如我们要获取到select查询语句中的字段id name ag
  • go协程池

    编写代码实现了一个计算随机数的每个位置数字之和的程序 要求使用goroutine和channel构建生产者和消费者模式 可以指定启动的goroutine数量 woker pool模式 在工作中我们通常使用workerpool模式 控制gor
  • select多路复用

    在某些场景下我们需要同时从多个通道接收数据 通道在接收数据时 如果没有数据可以接收发生阻塞 你也许会写出代码使用遍历的方式来实现 span class token keyword for span span class token punc
  • 并发安全和锁

    有时候在Go代码中可能会存在多个goroutine同时操作一个资源 xff0c 这种情况会发生数据竞态问题 举例 xff1a var x int64 var wg sync WaitGroup func add for i 61 0 i l
  • 解决import torch 报错:Failed to load image Python extension: warn(f“Failed to load image Python extens

    配置yolov5 下载地址 xff1a torch 和 torchvision的 下载完之后发现import torch没问题 但是import torchvision报错了 查阅资料原来是版本对不上 7条消息 PyTorch碎片 xff1
  • Mac电脑 - “USB 10/100 LAN”的电缆可能未插好,或另一端的设备没有响应。

    Mac突然就无法上网了 有可能装个驱动就好了 xff0c 前提是确保你的网卡芯片是realtek的 解决方法 xff1a 下这个驱动 xff0c 就好了
  • show engine innodb status解读

    注 xff1a 以下内容为根据 高性能mysql第三版 和 mysql技术内幕innodb存储引擎 的innodb status部分的个人理解 xff0c 如果有错误 xff0c 还望指正 xff01 xff01 innodb存储引擎在sh
  • Vuex速学篇:(1)基本套路

    我们前面做了一个这样的页面 xff0c 为了增加我们的学习难度 xff0c 我们特意拆分成了不同的组件 我们知道 xff0c 我们在子组件里并不能直接对兄弟组件里的属性进行操作 xff0c 我们通过this emit 调用父组件的方法 xf
  • ElementUI案例演示:导航、布局、加载动画

    知识点 1 vue router之嵌套路由 http router vuejs org zh cn essentials nested routes html 2 element ui 导航组件 布局组件 加载动画 http element
  • ElementUI之表单验证、数据绑定、路由跳转

    1 新建表单组件el form vue span class hljs tag lt span class hljs title template span gt span span class hljs tag lt span class
  • vue-router: 嵌套路由

    模板抽离 我们已经学习过了Vue模板的另外定义形式 xff0c 使用 lt template gt lt template gt span class hljs comment lt 模板抽离出来 gt span span class hl
  • react.js的两种路由方式:HashRouter

    react js路由 初步 前面我们已经了解了react js其中一种路由方式 这种方式是利用 html5的 span class hljs escape 96 w span indow history span class hljs es