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

news2024/11/5 12:26:51

写法上的区别:
写法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。



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

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

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

相关文章

Python 字符串类型中 ``split(“\n“)`` 与 ``splitlines()`` 方法的一些区别

最近在以 self.__print("#" * 20 "\n") 调用自己写的 __print 接口时发现打印的时候 "\n" 没有打出来,进而发现了 split("\n") 与 splitlines() 方法的一些区别。 一个是参数上,split 需要传递一个字符串作为…

Java Iterator 实现杨辉三角

一、问题描述 杨辉三角定义如下: 1/ \1 1/ \ / \1 2 1/ \ / \ / \1 3 3 1/ \ / \ / \ / \1 4 6 4 1/ \ / \ / \ / \ / \ 1 5 10 10 5 1 把每一行看做一个list,试写一个 Iterator,不断输出下一行的 list&#xf…

Spark 的介绍与搭建:从理论到实践

目录 一、分布式的思想 (一)存储 (二)计算 二、Spark 简介 (一)发展历程 (二)Spark 能做什么? (三)spark 的组成部分 (四&…

Linux操作系统 ------(3.文本编译器Vim)

目录 1.前言 2.本章学习目标 3.vim的三种工作模式 3.1一般模式‌ 3.2编辑模式‌ 3.3命令行模式‌ 4.运行vim 5.vim 不同工作模式下的常见命令 6.一般模式下的功能键 6.1移动光标类 6.2删除、复制和粘贴类 6.3查找替换类 7.从一般模式进入编辑模式 8.命令行模式下的…

RocketMQ的消息类型

RocketMQ的消息类型 文章目录 RocketMQ的消息类型一、顺序消息二、广播消息应用场景:示例代码:实现思路:注意点: 三、延时消息应用场景:核心方法: 四、批量消息应用场景:示例代码:注…

Selective Generation for Language Models 语言模型的选择性生成

生成式语言模型(Generative Language Models, GLMs)在文本生成任务中取得了显著进展。然而,生成内容的“幻觉”现象,即生成内容与事实或真实语义不符的问题,仍是GLMs在实际应用中的一个重大挑战。为了解决这一问题&…

git clone,用https还是ssh

前言 在使用Git去克隆项目时,会遇到https和ssh等形式,这两种又有何种区别呢,本文将重点讨论在具体使用中的问题。 注:第一次使用Git 时,需要先设置全局用户名和邮箱,否则后续使用命令时会报错,也是提醒先添…

最新整理:Selenium自动化测试面试题

1.selenium中如何判断元素是否存在? find_elements查找到的元素个数为0,find_element报错意味着元素不存在 2.如何判断元素是否出现? 判断元素是否出现,存在两种情况,一种是该元素压根就没有,自然不会出现;另外一种是有这样的…

业绩代码查询实战——php

一、一级代码显示职员 foreach($data_职员信息 as $key > $value){//$where_查询分类$where_查询通用;//$dat分类one $业绩提成->where($where_查询分类)->order("CreateDate desc")->select();if($value[haschildname]0 && $value[key] !"…

如何彻底删除gitbash中所有的命令记录、以及彻底删除Windows powerShell或者cmd中的所有命令记录

文章目录 1. 文章引言2. 彻底删除gitbash中所有的命令记录3. 彻底删除Windows powerShell或者cmd中的所有命令记录1. 文章引言 有时,我们使用外部电脑从gitbash中下载代码,假设使用history -c命令: 可以清除当前弹框的历史记录,但也无法彻底删除命令记录。打开gitbash后,通…

工作管理实战指南:利用Jira、Confluence等Atlassian工具打破信息孤岛,增强团队协作【含免费指南】

如果工作场所存在超级反派,其中之一可能会被命名为“信息孤岛”,因为它们能够对公司的生产力和协作造成严重破坏。当公司决定使用太多互不关联的工具来完成工作时,“信息孤岛”就会出现,导致团队需要耗费大量时间才能就某件事情达…

OceanBase V4.3.3,首个面向实时分析场景的GA版本发布

在10月23日举办的 OceanBase年度发布会 上,我们怀着激动之情,正式向大家宣布了 OceanBase 4.3.3 GA 版的正式发布,这也是OceanBase 为实时分析(AP)场景打造的首个GA版本。 2024 年初,我们推出了 4.3.0 版本…

最新最全面的JAVA面试题免费下载

面对求职市场的激烈竞争,掌握全面且深入的Java知识已成为每一位Java开发者必不可少的技能。《2023最新版Java面试八股文》是一份精心整理的面试准备资料,旨在帮助广大开发者系统复习,从容应对Java及相关技术栈的面试挑战。这份文档不仅汇聚了…

Spring Security 框架篇-深入了解 Spring Security 的授权核心功能(RBAC 权限模型、自定义异常处理器、校验权限方法)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 权限系统 1.1 引入 1.2 RBAC 权限模型 1.3 数据库设计 2.0 Spring Security 核心功能-授权 2.1 思路分析 2.2 编写 SQL 语句 2.3 将用户权限进行封装 2.4 获取用户…

博捷芯MIP专机:精密划片技术的革新者

BJX8160 精密划片机作为MINI行业的专用机,凭借其全自动上下料、高精度高速度um级无膜切割以及兼容多种上下料方式等特点,成为了工厂无人值守自动化的理想选择。同时,MIP专机作为博捷芯的独创产品,展现了博捷芯在精密划片机领域的领…

【嵌入式】STM32中的SPI通信

SPI是由摩托罗拉公司开发的一种通用数据总线,其中由四根通信线,支持总线挂载多设备(一主多从),是一种同步全双工的协议。主要是实现主控芯片和外挂芯片之间的交流。这样可以使得STM32可以访问并控制各种外部芯片。本文…

Android 虚拟化框架(AVF)指南

Android 虚拟化框架(AVF)指南 一、项目介绍二、项目特色三、如何使用AVF四、总结 随着移动设备的普及和应用场景的多样化,安全性和隐私保护成为了移动操作系统的重要课题。Android作为全球最广泛使用的移动操作系统之一,一直在不断…

explain执行计划分析 ref_

这里写目录标题 什么是ExplainExplain命令扩展explain extendedexplain partitions 两点重要提示本文示例使用的数据库表Explain命令(关键字)explain简单示例explain结果列说明【id列】【select_type列】【table列】【type列】 【possible_keys列】【key列】【key_len列】【ref…

1.2 图像处理基本操作

在本实战中,我们将学习如何使用OpenCV进行基本的图像处理操作。首先,我们将通过cv2.imread()函数读取图像,并使用cv2.imshow()在窗口中显示它。接着,我们将探索如何通过cv2.imwrite()保存图像,并设置不同的参数以控制图…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集:制作UI系统的主菜单界面和选择存档界面

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、制作UI系统的主菜单界面 1.选择存档界面制作 2.代码的逻辑处理二、制作UI系统的选择存档界面 1.选择存档界面制作2.代码的逻辑处理总结 前言 hello大家好久…