react-router-dom和react-router的区别

react-router-dom和react-router的区别

前言

在使用react-router-dom的时候,经常会和react-router搞混了,搞不清楚它们哪个跟哪,到底有什么关系,今天来总结一下。

结论

  1. react-router-dom是在react-router的基础上开发的,react-router-dom中很多组件都是直接从react-dom中直接导出的。所以安装了react-router-dom后就不用再安装react-router;
  2. 在react-router的基础上,额外提供了BrowserRouter、HashRouter、Link、NavLink组件,可以用于路由跳转。其中BrowserRouter、HashRouter用于替代react-router中的Router组件;Link、NavLink的作用类似于a标签;
  3. BrowserRouter和HashRouter
    • BrowserRouter是history模式路由,路由长这样http://abc.com/xxx,是通过浏览器的history.pushState和history.popState实现,可能会有一定兼容性,低版本的浏览器不支持,比如ie,部署到服务器上需要进行一定的配置,具体要配置什么,这里不做讨论;
    • HashRouter是hash模式路由,路由长这样http://abc.com#/xxx,浏览器通过监听hashchange来改变路由的,兼容性良好

在react-router-dom的modules源码中可以看到这些区别
在这里插入图片描述

Switch组件使用的问题

Switch组件会按照Route的书写顺序匹配,只找到第一个被匹配到的Route就立即停止继续匹配,并且把它渲染出来。

那么问题来了,我用exact不就可以了,为啥还需要用Switch呢? 不Switch组件而直接使用Route组件+exact,也可以做到Switch组件类似的效果。但是使用这种方法,就算匹配到了路由,它不会停止继续匹配,而是继续往后找,造成性能浪费。

参考资料:
1、react-router区别
2、switch组件的作用

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

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

相关文章

变现:利用 chatgpt + midjourney 制作微信表情包

1、利用gpt生成提示词,当然也可以直接翻译 生成基础提示词, 比如: an anime image with a white kawaii character in it, in the style of light green and brown, minimalist detail, animated gifs, cranberrycore, 1860–1969, babyco…

云计算结合数据科学突破信息泛滥(下)

大家好,本文将继续讨论云计算结合数据科学突破信息泛滥的相关内容,讲述其余三个关键组成部分。 3.数据清理和预处理 收集数据并将其存储在云端之后,下一步是将数据进行转换。因为原始数据经常包含错误、不一致和缺失的值,这些都…

C#实现数字验证码

开发环境:VS2019,.NET Core 3.1,ASP.NET Core API 1、建立一个验证码控制器 新建两个方法Create和Check,Create用于创建验证码,Check用于验证它是否有效。 声明一个静态类变量存放列表,列表中存放包含令…

python selenium爬虫自动登录实例

拷贝地址:python selenium爬虫自动登录实例_python selenium登录_Ustiniano的博客-CSDN博客 一、概述 我们要先安装selenium这个库,使用pip install selenium 命令安装,selenium这个库相当于机器模仿人的行为去点击浏览器上的元素&#xff0…

uni-app:setTimeout函数(延迟时间之后执行)

下面的代码表示在 500 毫秒(即0.5秒)之后,会执行你在函数中编写的代码。你可以将需要执行的代码放在注释部分的位置。 setTimeout(function() {// 在这里写要执行的代码 }, 500); 例如: 在经过 500 毫秒后,控制台会…

Android ANR触发机制之Service ANR

一、前言 在Service组件StartService()方式启动流程分析文章中,针对Context#startService()启动Service流程分析了源码,其实关于Service启动还有一个比较重要的点是Service启动的ANR,因为因为线上出现了上百例的"executing service &quo…

R-并行计算

本文介绍在计算机多核上通过parallel包进行并行计算。 并行计算运算步骤: 加载并行计算包,如library(parallel)。创建几个“workers”,通常一个workers一个核(core);这些workers什么都不知道,它们的全局环…

c++学习(位图)[22]

位图 位图(Bitmap)是一种数据结构,用于表示一个固定范围的布尔值(通常是0或1)。它使用一个二进制位来表示一个布尔值,其中每个位的值表示对应位置的元素是否存在或满足某种条件。 位图可以用于解决一些特…

1.8 函数的连续性与间断点(二)

🙌作者简介:数学与计算机科学学院出身、在职高校高等数学专任教师,分享学习经验、生活、 努力成为像代码一样有逻辑的人! 🌙个人主页:阿芒的主页 ⭐ 高等数学专栏介绍:本专栏系统地梳理高等数学…

利用MATLAB制作DEM山体阴影

在地理绘图中,我们使用的DEM数据添加山体阴影使得绘制的图件显得更加的美观。 GIS中使用ArcGIS软件就可以达到这一目的,或者使用GMT,同样可以得到山体阴影的效果。 本文提供了一个MATLAB的函数,可以得到山体阴影。 clear all;c…

C#中窗体之间的传值操作(传递值和获取返回值)

在C#的应用程序开发中,窗体之间的传值操作是不可避免会经常遇到的操作。   比如,在一个窗体中调用另外一个窗体、传递值并且得到返回值,通常情况下有哪些方法呢?   一般情况下,通过工程项目的公有变量、窗体的公有…

React 中 ref 如何使用?

在React 中要使用 ref ,首先要创建一个新的对象 // 创建 ref 对象于jsx 绑定const inputRer useRef(null);在使用 ref 时不要在组件渲染时使用 ref 进行 dom 操作,因为此时ref 还没有值,会报错 (注意:操作文本框时尽…

AI面试官:LINQ和Lambda表达式(二)

AI面试官:LINQ和Lambda表达式(二) 当面试官面对C#中关于LINQ和Lambda表达式的面试题时,通常会涉及这两个主题的基本概念、用法、实际应用以及与其他相关技术的对比等。以下是一些可能的面试题目,附带简要解答和相关案…

解放Linux内存:释放缓存(linux释放缓存)

随着软件越来越复杂,内存变得越来越宝贵。尤其是在Linux系统上,内存管理策略十分重要。它不仅可以帮助系统保持高效运行,而且也能够让程序有更多的空间来运行,避免系统出现假死和其他性能问题。 在Linux系统中,释放缓…

《面试1v1》如何能从Kafka得到准确的信息

🍅 作者简介:王哥,CSDN2022博客总榜Top100🏆、博客专家💪 🍅 技术交流:定期更新Java硬核干货,不定期送书活动 🍅 王哥多年工作总结:Java学习路线总结&#xf…

安防视频管理平台GB设备接入EasyCVR, 如何获取RTMP与RTSP视频流

安防视频监控平台EasyCVR可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力,比…

基于粒子群优化算法的分布式电源选址与定容【多目标优化】【IEEE33节点】(Matlab代码实现)

目录 💥1 概述 1.1 目标函数 2.2 约束条件 📚2 运行结果 🎉3 参考文献 🌈4 Matlab代码实现 💥1 概述 分布式电源接入配电网,实现就地消纳,可以提高新能源的利用率、提高电能质量和降低系统网损…

网络渗透入门指南

目录 简介: 1. 什么是网络渗透? 2. 渗透测试类型 1.黑盒测试 2.白盒测试 3.灰盒测试 3. 渗透测试步骤 3.1 信息收集 3.2 漏洞扫描与评估 3.3 漏洞利用 3.4 特权升级与持久性访问 3.5 横向移动 3.6 数据获取与报告 实例: 总结 简…

ResponseEntity

ResponseEntity : 是 spring framework中的一个类,用于封装 http响应的实体部分,包含,主题内容,http响应头,http状态码,等信息,, 用来返回相应给客户端 HttpStatus 是个枚举类&…

出海周报|Temu在美状告shein、ChatGPT安卓版上线、小红书回应闪退

工程机械产业“出海”成绩喜人,山东相关企业全国最多Temu在美状告shein,跨境电商战事升级TikTok将在美国推出电子商务计划,售卖中国商品高德即将上线国际图服务,初期即可覆盖全球超200个国家和地区ChatGPT安卓版正式上线&#xff…