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

react-router与react-router-dom的区别

写法上的区别:
写法1:

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

写法2:

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

react-router实现了路由的核心功能
react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能,例如:Link组件,会渲染一个a标签,Link组件源码a标签行; BrowserRouterHashRouter组件,前者使用pushStatepopState事件构建路由,后者使用window.location.hashhashchange事件构建路由。

从源码层面来说明:

首先看react-router-dom中的Switch组件的源码

// Written in this round about way for babel-transform-imports
import { Switch } from 'react-router'
export default Switch

只是从react-router中导入Switch组件,然后重新导出而已。
react-router-dom依赖react-router,
。基于浏览器环境的开发,只需要安装react-router-dom;基于react-native环境的开发,只需要安装react-router-native。
react-router-dom中package.json依赖:

"dependencies": {
"history": "^4.7.2",
"invariant": "^2.2.2",
"loose-envify": "^1.3.1",
"prop-types": "^15.5.4",
"react-router": "^4.2.0",
"warning": "^3.0.0"
}
安装了react-router-dom,npm会解析并安装上述依赖包。可以看到,其中包括react-router。



喜欢的朋友记得点赞、收藏、关注哦!!!

相关文章:

react-router与react-router-dom的区别

写法上的区别: 写法1: import {Swtich, Route, Router, HashHistory, Link} from react-router-dom;写法2: import {Switch, Route, Router} from react-router; import {HashHistory, Link} from react-router-dom;react-router实现了路由的核心功能 react-router-…...

【研究生必看】把选题和文献交给AI,轻松搞定毕业论文!

在学习和研究的过程中,选题和文献录入真的是让人头疼的事情。面对一堆资料,很多时候我们会感到无从下手,甚至有点焦虑。不过,大家别担心!现在有了像“梅子AI论文”这样的工具,可以帮助我们轻松搞定这些问题…...

Android中同步屏障(Sync Barrier)介绍

在 Android 中,“同步屏障”(Sync Barrier)是 MessageQueue 中的一种机制,允许系统临时忽略同步消息,以便优先处理异步消息。这在需要快速响应的任务(如触摸事件和动画更新)中尤为重要。 在 An…...

真·香!深度体验 zCloud 数据库云管平台 -- DBA日常管理篇

点击蓝字 关注我们 zCloud 作为一款业界领先的数据库云管平台,通过云化自治的部署能力、智能巡检和诊断能力、知识即代码的沉淀能力,为DBA的日常管理工作带来了革新式的简化与优化。经过一周的深度体验,今天笔者与您深入探讨 zCloud 在数据库…...

优雅的遍历JSONArray,获取里面的数据

最近看到有个同事在遍历json数组的时候,用for循环写了一层有一层,那么是否有简便的写法呢?当然有了,下面就有用流的行驶,优雅的遍历数组,获取我们想要的数据 public static void main(String[] args) {Str…...

C#:强大而优雅的编程语言

在当今的软件开发领域,C#作为一种广泛应用的编程语言,以其强大的功能、优雅的语法和丰富的生态系统,受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面,展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…...

一个由Deno和React驱动的静态网站生成器

大家好,今天给大家分享一个由 Deno React 驱动的静态网站生成器Pagic。 项目介绍 Pagic 是一个由 Deno React 驱动的静态网站生成器。它配置简单,支持将 md/tsx 文件渲染成静态页面,而且还有大量的官方或第三方主题和插件可供扩展。 核心…...

Python pyautogui库:自动化操作的强大工具

在Python的众多强大库中, pyautogui库脱颖而出,成为了实现自动化操作的得力助手。它允许你通过编程控制鼠标和键盘操作,无论是进行自动化测试、创建宏,还是进行一些重复性的任务,pyautogui都能发挥巨大的作用。 一、安…...

【HTML】——VSCode 基本使用入门和常见操作

阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 零:HTML开发工具VSCode的使用 1:创建项目 2:创建格式模板&#x…...

从0开始搭建一个生产级SpringBoot2.0.X项目(八)SpringBoot 使用Redis

前言 最近有个想法想整理一个内容比较完整springboot项目初始化Demo。 SpringBoot使用Redis 缓存数据 一、 pom引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId>&…...

Ubuntu20.04两种安装及配置中文界面、输入法、换源、共享文件夹实现,及注意事项

虚拟机安装法 1、新建虚拟机&#xff0c;自定义下一步 任意指定路径 提高处理器数量能加快系统响应 完成以后不要运行&#xff0c;添加镜像文件 导入镜像文件&#xff0c;点击浏览 选择后打开->确认->运行虚拟机 出现这种情况就需要检查虚拟机的配置&#xff0c;操作系统…...

后端Java学习:springboot之文件上传(阿里云OSS存储)

一、什么是阿里云存储&#xff1f; 阿里云对象存储OSS&#xff08;Object Storage Service&#xff09;&#xff0c;是一款海量、安全、低成本、高可靠的云存储服务。使用OSS&#xff0c;您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种文件。 二、阿里云…...

python通过lunarcalendar库使用农历日期

农历日期库 介绍 lunarcalendar是一个处理农历日期的库 可以简单通过pip安装&#xff1a;pip install lunarcalendar lunarcalendar的github地址 从公历转为农历 from lunarcalendar import Converter, Solarsolar Solar(2024, 11, 1) lunar Converter.Solar2Lunar(sola…...

MySQL高级--范式与反范式

MySQL高级–范式与反范式 1. 背景 首先让我们来简单了解什么是范式与反范式 如下有部门表&#xff08;包含&#xff1a;雇员、部门、部门领导&#xff09; EMPLOYEEDEPARTMENTHEADJonesAccountingJonesSmithEngineeringSmithBrownAccountingJonesGreenEngineeringSmith 我们…...

实验05多重循环---7-02 打印矩形图案

打印一个 m 行 n 列的字符 * 组成的矩形图案。 输入格式: 输入在一行中给出空格隔开的两个整数&#xff0c;分别表示行数 m 和列数 n&#xff0c;其中 m 和 n 分别满足 1≤m≤10&#xff0c;1≤n≤20。 输出格式: 由字符 * 组成的 m 行 n 列的矩形图案。 输入样例: 3 5 输出…...

明源地产ERP WFWebService.asmx 反序列化RCE漏洞复现

0x01 产品简介 明源地产ERP是一款专为房地产行业设计的企业资源规划(ERP)系统,系统集成了项目管理、财务管理、客户关系管理、营销管理等多个模块,旨在帮助房地产企业提升运营效率、降低成本和提高客户满意度。它充分考虑了房地产行业的特性和需求,通过整合企业的各个业务…...

学习笔记:黑马程序员JavaWeb开发教程(2024.11.4)

5.8 请求响应-请求-案例 数据保存在emp.xml文件中&#xff0c;解析XML的工具类XMLParserUtils&#xff0c;其中使用了dom4j的接口&#xff0c;因此要在pom.xml文件中引入dom4j的依赖&#xff0c;用于解析XML文件&#xff0c;实体类Emp用于封装服务器解析的数据 前端页面文件…...

开源自托管数据管理工具全面指南

在大数据时代&#xff0c;企业和组织面临着海量的数据挑战。随着应用程序复杂性的提高以及用户需求不断演变&#xff0c;开发团队需要高效地处理大量数据&#xff0c;以便快速做出决策。然而&#xff0c;在众多信息中&#xff0c;如何识别并有效利用那些对决策至关重要的数据呢…...

护工系统|护工陪护软件|护工系统设计

在现代社会&#xff0c;护工系统的开发成为提升医疗服务质量和效率的重要手段。页面设计作为系统开发的关键环节&#xff0c;必须充分考虑到实用性与用户体验。以下是对护工系统开发页面设计功能的详细阐述&#xff1a; 一、用户登录与权限管理 页面设计首先应设置用户登录模块…...

电商领域软件系统实战:基于TiDB的分布式数据库应用

在电商领域&#xff0c;数据的快速增长和复杂性对数据库系统提出了更高要求。TiDB作为一款开源的分布式数据库&#xff0c;以其兼容MySQL协议、水平扩展能力强、高可用性等特性&#xff0c;在电商系统中得到了广泛应用。本文将围绕TiDB在电商领域的应用&#xff0c;详细介绍其搭…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...