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

news2024/11/15 6:42:22

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.coloradmin.cn/o/802312.html

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

相关文章

Mybatis-Plus学习笔记,包含mybatis-plus基本使用,各种插件使用等等

😀😀😀创作不易,各位看官点赞收藏. 文章目录 Mybatis-Plus笔记1、简介2、Mybatis-Plus Demo 程序3、Mybatis-Plus 常见注解4、Mybatis-Plus 条件构造器 Wrapper5、Mybatis-Plus 插件5.1、乐观锁插件5.2、分页插件5.3、逻辑删除插件…

Vue + Element-ui组件上传图片报错问题解决方案

在前端开发中,我们经常需要模拟网络请求以进行单元测试或开发调试。而在模拟网络请求时,我们常常会使用到MockXMLHttpRequest对象。MockXMLHttpRequest对象是一个用于模拟XMLHttpRequest对象的工具,它提供了一种简单的方式来模拟网络请求&…

【uniapp】实现买定离手小游戏

前言 最近玩了一个小游戏,感觉挺有意思,打算放进我的小程序【自动化小助手】里面,“三张押一张,专押花姑娘!”,从三张卡牌,挑选一张,中奖后将奖励进行发放,并且创建下一…

【Linux线程】第一章||理解线程概念+创建一个线程(附代码加讲解)

线程概念 🌵什么是线程🌲线程和进程的关系🎄线程有以下特点:🌳 线程的优点🌴 线程的缺点🌱线程异常🌿线程用途 ☘️手动创建一个进程🍀运行 🌵什么是线程 在L…

【需求响应DR】一种新的需求响应机制DR-VCG研究(Python代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【技术架构】技术架构的演进

文章目录 前言1.名词解释(常见概念)1.1 应用(Application) / 系统(System)1.2 模块(Module) / 组件(Component)1.3 分布式(Distributed)1.4 集群(…

AOP概念 和 使用

目录 AOP的概念 什么是AOP? 什么是SpringAOP? 为什要⽤ AOP? AOP的作用? AOP的组成 通知 AOP的实现 1. 添加 Spring AOP 框架⽀持。 2. 定义切面和切点。 3. 定义通知。 切点表达式 AOP的概念 什么是AOP? AOP(Aspect Oriented Programm…

工程师分享:如何解决传导干扰?

电磁干扰 EMI 中电子设备产生的干扰信号是通过导线或公共电源线进行传输,互相产生干扰称为传导干扰。传导干扰给不少电子工程师带来困惑,如何解决传导干扰? 找对方法,你会发现,传导干扰其实很容易解决,只要…

献给大一新生的JavaSE入门篇章 大三秋招JavaSE

Java反射 反射实现有哪些? Class.forName(“com.jdbc.cj.Driver.mysql”) 类名.class 对象名.getClass() 反射优缺点有哪些? 优点: 能够动态的获取类的实例,提高灵活性 缺点: 会降低性能,解决办法: 1. 如果多次创建某个对象的实例,使用…

Pixelmator Pro 3.3.10 Mosaic (macOS Universal) - 专业图像编辑工具

Pixelmator Pro 3.3.10 Mosaic (macOS Universal) - 专业图像编辑工具 请访问原文链接:https://sysin.org/blog/pixelmator-pro-3/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org Pixelmator Pro 真正基于 Apple M…

机器学习算法实现(基于numpy)

《机器学习公式推导与代码实现》学习笔记,记录一下自己的学习过程,详细的内容请大家购买作者的书籍查阅。 这篇博客是将笔者边学边刷《机器学习公式推导与代码实现》的模型跟代码记录下来,部分地方结合自己的思考对原作者的代码有一定的改动…

【自定义图库】

sld文件 前段时间,有网友委托我帮他做一个家具的图库。 首先,做图库的方法有很多,最简单的是MFC拖控件然后自己把做好的bmp图贴进去就可以了,麻烦一点的是sld文件,最麻烦 是用blockview做。 下面先说说3种办法的区别: 首先,如果用MFC拖控件的办法,最简单也最方便,用st…

安全帽检测+反光衣检测+工作服检测数据集

安全帽检测反光衣检测工作服检测数据集下载地址分享:https://download.csdn.net/download/qq_34717531/88112870

AF 350 tyramide,AlexaFluor350 TSA,AF350酪胺,荧光标记试剂

文章资料汇总来源于:陕西新研博美生物科技有限公司小编MISSwu​ PART1----产品描述 AF350 tyramide(AlexaFluor350酪酰胺),用于荧光标记的试剂,Tyramide信号放大(TSA)已被证明是一种特别通用且…

SAS-input和put的使用

在SAS中经常会遇到数值型变量与字符型变量之间进行相互转换,如何进行转换呢? 一、字符型转数值型 方法1:字符型变量通过运算进行转换,如Numeric Character * 1。运算符可以转换,但是会有NOTE提示,不推荐…

一个外贸业务员的鸡飞蛋打

最近在论坛上看到一个案例,案例是一个是SOHO的业务员从他朋友厂子拿货, 然后他发现他的前同事在他朋友的厂子做sales director,然后最近一个客户A出货,这个小伙伴就去他朋友的工厂做发货前的质检,正好碰到以前的一个同事也去他朋友…

【Docker】Docker安全性与安全实践(五)

前言: Docker安全性的作用和意义在于确保容器化应用程序和镜像的隔离性、保护数据和系统资源、防止恶意攻击,以及提高应用的整体安全性。 文章目录 1. Docker安全性1.1 隔离性1.2 镜像安全1.3 特权访问1.4 数据保护 2. Docker安全实践2.1 使用官方镜像或…

管理类联考——数学——趣味篇——可视化——安装Manim软件

Manim: 一个数学可视化的动画引擎 官网:https://3b1b.github.io/manim/index.html 名词解析 python3.7是python语言的解释器, 运行python程序的环境必备品. 这个没啥说的,大家都能懂. 虽然官方建议3.7,但是我用3.8发现也没问题.考虑未来的历史进程,大伙最好还是装…

Windows Subsystem for Android (WSA) 下载:在 Windows 11 上运行 Android 应用 (July 2023)

Windows Subsystem for Android (WSA) 下载:在 Windows 11 上运行 Android 应用 (July 2023) 适用于 Android™️ 的 Windows 子系统,2023 年 7 月更新:2306.40000.4.0 请访问原文链接:https://sysin.org/blog/wsa/,…

探讨高校公共建筑能耗监测系统的设计与应用

安科瑞 华楠 摘要:在资源节约型社会建设进程中,高校公共建筑能耗管理存在问题已经成为办学成本加大、社会资源浪费的桎梏。在各级政府的推动下,高校公共建筑能耗监测系统建设在探索中发展,依托互联网大数据技术逐步实现能耗管理信…