当前位置: 首页 > news >正文

说说React Router有几种模式?实现原理?

一、是什么

在单页应用中,一个web项目只有一个html页面,一旦页面加载完成之后,就不用因为用户的操作而进行页面的重新加载或者跳转,其特性如下:

  • 改变 url 且不让浏览器像服务器发送请求
  • 在不刷新页面的前提下动态改变浏览器地址栏中的URL地址

其中主要分成了两种模式:

  • hash 模式:在url后面加上#,如http://127.0.0.1:5500/home/#/page1
  • history 模式:允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录

二、使用

React Router对应的hash模式和history模式对应的组件为:

  • HashRouter
  • BrowserRouter

这两个组件的使用都十分的简单,作为最顶层组件包裹其他组件,如下所示

// 1.import { BrowserRouter as Router } from "react-router-dom";
// 2.import { HashRouter as Router } from "react-router-dom&#

相关文章:

说说React Router有几种模式?实现原理?

一、是什么 在单页应用中,一个web项目只有一个html页面,一旦页面加载完成之后,就不用因为用户的操作而进行页面的重新加载或者跳转,其特性如下: 改变 url 且不让浏览器像服务器发送请求在不刷新页面的前提下动态改变浏览器地址栏中的URL地址其中主要分成了两种模式: has…...

laravel5+版本aes128加解密

使用场景: aes/cbc/pkcs5padding/128加解密 EncryptService.php代码示例如下 namespace App\Services;/*** aes/cbc/pkcs5padding/128加解密*/ class EncryptService {//加密方法private static $sDefaultEncMethod AES-128-CBC;//默认key值-自定义16位字符串长度…...

Spark的转换算子和操作算子

1 Transformation转换算子 1.1 Value类型 1)创建包名:com.shangjack.value 1.1.1 map()映射 参数f是一个函数可以写作匿名子类,它可以接收一个参数。当某个RDD执行map方法时,会遍历该RDD中的每一个数据项,并依次应用f函…...

传奇手游天花板赤月【盛世遮天】【可做底版】服务端+自主授权+详细教程

搭建资源下载地址:传奇手游天花板赤月【盛世遮天】【可做底版】服务端自主授权详细教程-海盗空间...

TP触摸屏调试

此处以MT6739 1g版本敦泰TP为例(kernel 4.19),主要修改点如下: 1. 两个配置文件defconfig: kernel-4.19\arch\arm\configs\k39tv1_bsp_1g_k419_debug_defconfig: kernel-4.19\arch\arm\configs\k39tv1_bsp_1g_k419_defconfig: CONFIG_INPUT_TOUCHSCREEN=y CONFIG_TOUCHSCRE…...

11-13 spring整合web

spring注解 把properties文件中的key注入到属性当中去 xml配置文件拆分 -> import标签 注解开发中 import 实现 搞一个主配置类,其他配置类全部导入进来这个这个主配置类 而且其他配置类不需要 加上configuration注解 之前这个注解用于表示这是一个配置文件 …...

基于C#开发的任天堂 Switch 开源模拟器

今天给大家推荐一款基于C#开发的任天堂 Switch 开源模拟器,可方便开发人员来测试游戏,也用于娱乐。 01 项目简介 Ryujinx 是一个开源的任天堂 Switch 模拟器,可以在 PC 上模拟运行 Switch 游戏。采用C#开发,基于 .NET Core技术框…...

做一个Sprngboot文件上传-阿里云

概述 这个模块是用来上传头像以及文章封面的,图片的值是一个地址字符串,一般存放在本地或阿里云服务中 1、本地文件上传 我们将文件保存在一个本地的文件夹下,由于可能两个人上传不同图片但是却同名的图片,那么就会一个人的图片就…...

k8s ----对外暴露

目录 一、Ingress 简介 1、Ingress 组成 2、Ingress 工作原理 二、部署Ingress 1、部署 nginx-ingress-controller 2、暴露ingress 4.1 DaemonSetHostNetworknodeSelector模式的service 4.2 DeploymentNodePort模式的Service 三、Ingress HTTP 代理访问 四、Ingress …...

每日一题(LeetCode)----数组--长度最小的子数组

每日一题(LeetCode)----数组–长度最小的子数组 1.题目( 209.长度最小的子数组) 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &…...

TCP与UDP

文章目录 TCP与UDP传输层的作用端口号UDPTCPUDP首部的格式TCP首部格式 TCP与UDP TCP/IP中有两个具有代表性的传输层协议,它们分别是TCP和UDP。TCP提供可靠的通信传输,而UDP则常被用于让广播和细节控制交给应用的通信传输。总之,根据通信的具…...

js实现对象数组去重

数组去重,一般会在面试的时候才会碰到,要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。 在实际项目中碰到的数组去重,一般都是后台去处…...

2023 极术通讯-安谋科技发布“山海”S20F安全解决方案,持续加码智能汽车“芯”赛道

导读:极术社区推出极术通讯,引入行业媒体和技术社区、咨询机构优质内容,定期分享产业技术趋势与市场应用热点。 芯方向 AMBA向多芯片和CHI C2C进发 Arm的Advanced Microcontroller Bus Architecture(AMBA)在与生态系…...

GRPC学习

GRPC元数据 在gRPC中,元数据(metadata)是用于在gRPC请求和响应中传递附加信息的一种机制。元数据是以键值对(key-value pairs)的形式组织的信息,它可以包含请求的上下文信息、安全凭证、消息传输相关的信息…...

c++ latch 使用详解

c latch 使用详解 std::latch c20 头文件 #include <latch>。作用&#xff1a;提供了一种机制&#xff0c;可以让一个或多个线程等待&#xff0c;直到计数器减为零。注意事项&#xff1a; latch 为向下计数器&#xff0c;即只能减少不能增加或者重置。这也使得其只能单…...

linux 下正确使用cp命令复制目录

linux下复制目录时&#xff0c;cp -r 没有 cp -a 好&#xff1a; 使用cp -r 拷贝数据&#xff0c;拷贝的结果是生成新的时间戳等信息 使用cp -a 相当于将原数据原封不动的拷贝过来&#xff0c;不改变里面的任何信息 指定目录时&#xff0c; 源目录/* 【说明&#xff1a;斜…...

CTF----Web真零基础入门

目录 前置知识导图&#xff1a; ​TCP/IP体系结构&#xff08;IP和端口&#xff09;&#xff1a; IP是什么&#xff1a;是计算机在互联网上的唯一标识&#xff08;坐标&#xff0c;代号&#xff09;&#xff0c;用于在互联网中寻找计算机。 内网&#xff08;局域网&#xf…...

css实现元素四周阴影

前言 首先确定的是需要使用box-shadow这一属性 语法如下&#xff1a; box-shadow: h-shadow v-shadow blur spread color inset; h-shadow&#xff1a;表示水平方向上的阴影偏移量&#xff0c;必须指明&#xff0c;可以是正数、负数、0&#xff0c;如果为正数左方有阴影&…...

《QT从基础到进阶·二十五》界面假死处理

假如有这样一种情况&#xff0c;我们在主线程写了一个死循环&#xff0c;当程序运行到主线程的死循环代码后界面便卡死点了没有反应&#xff0c;这里提供几种方法处理界面假死的情况&#xff0c;保证比如主线程在执行死循环没有退出的时候点击界面不会卡死能继续执行其他功能。…...

卷积神经网络(1)

目录 卷积 1 自定义二维卷积算子 2 自定义带步长和零填充的二维卷积算子 3 实现图像边缘检测 4 自定义卷积层算子和汇聚层算子 4.1 卷积算子 4.2 汇聚层算子 5 学习torch.nn.Conv2d()、torch.nn.MaxPool2d()&#xff1b;torch.nn.avg_pool2d()&#xff0c;简要介绍使用方…...

2026年03月总结及随笔之又双叒叕漏更

1. 回头看日更坚持了1186天。读《人工智能全球格局&#xff1a;未来趋势与中国位势》更新完成读《2025世界前沿技术发展报告》开更并持续更新中2023年至2025年12月底累计码字3054280字&#xff0c;累计日均码字2786字。2023年至2026年03月底累计码字3334223字&#xff0c;累计日…...

中国四大高考工厂是哪四所

根据当前&#xff08;2026年4月&#xff09;可查的权威公开资料&#xff0c;‌“中国四大高考工厂”通常指以下四所中学‌&#xff1a; ‌1、河北衡水中学‌ 2、安徽毛坦厂中学‌ 3、‌河南郸城一高‌&#xff08;即郸城县第一高级中学&#xff09; 4、湖北黄冈中学 ‌ 背…...

GPEN老照片修复案例:增强前后对比,效果直观展示

GPEN老照片修复案例&#xff1a;增强前后对比&#xff0c;效果直观展示 1. 引言&#xff1a;老照片修复的痛点与解决方案 翻开泛黄的相册&#xff0c;那些承载着珍贵记忆的老照片往往因为年代久远而变得模糊、褪色甚至破损。传统的手工修复不仅耗时耗力&#xff0c;还需要专业…...

Docker---容器编排工具Docker Compose

Docker Compose核心功能使用YAML文件定义多容器应用一键启动/停止/重建整个应用栈管理服务依赖关系与网络配置环境变量集中管理&#xff0c;适配多环境部署核心概念层级Service&#xff08;服务&#xff09;&#xff1a;一个应用组件&#xff0c;可包含多个相同镜像的容器实例P…...

无人水下航行器(UUV)与无人航空系统(UAS)时空会合关键技术研究附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f34a;个人信条&#xff1a;格物致知,完整Matlab代码及仿真咨询…...

3分钟掌握英雄联盟身份定制:LeaguePrank终极使用指南

3分钟掌握英雄联盟身份定制&#xff1a;LeaguePrank终极使用指南 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 还在为千篇一律的游戏界面感到乏味吗&#xff1f;想在不违反游戏规则的前提下展示个性风格&#xff1f;LeagueP…...

Qwen2.5-14B-Instruct开源大模型应用:像素剧本圣殿实现剧本动作/对白/旁白自动分段

Qwen2.5-14B-Instruct开源大模型应用&#xff1a;像素剧本圣殿实现剧本动作/对白/旁白自动分段 1. 项目概述 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct深度微调的专业剧本创作工具。它将先进的AI推理能力与独特的8-Bit复古美学…...

Typora风格文档化:使用Markdown实时记录PyTorch 2.8实验过程

Typora风格文档化&#xff1a;使用Markdown实时记录PyTorch 2.8实验过程 1. 为什么需要实验过程文档化 在深度学习研究领域&#xff0c;实验过程的可复现性一直是个老大难问题。很多研究者都有这样的经历&#xff1a;三个月前跑的实验&#xff0c;现在想复现结果&#xff0c;…...

快速验证模型服务:AutoGen Studio中连接vLLM部署的Qwen3-4B

快速验证模型服务&#xff1a;AutoGen Studio中连接vLLM部署的Qwen3-4B 1. 环境准备与快速部署 1.1 镜像启动与基础检查 首先确保已成功启动AutoGen Studio镜像&#xff0c;该镜像已预置vLLM部署的Qwen3-4B-Instruct-2507模型服务。验证模型服务是否正常运行&#xff1a; c…...

macOS安装OpenClaw全流程:Qwen2.5-VL-7B图文模型调试技巧

macOS安装OpenClaw全流程&#xff1a;Qwen2.5-VL-7B图文模型调试技巧 1. 为什么选择OpenClawQwen2.5-VL组合 去年冬天第一次接触OpenClaw时&#xff0c;我正被重复性的截图标注工作折磨得焦头烂额。当时尝试过几个自动化工具&#xff0c;要么功能太局限&#xff0c;要么需要把…...