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。



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

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

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

相关文章

如何在C下比较两个字符串是否相同?

strcmp函数 strcmp函数是C标准库中用于比较两个字符串的函数。它的原型定义在string.h头文件中 函数原型: int strcmp(const char *str1, const char *str2); str1 和 str2 是两个要比较的字符串。返回值为整数类型: 如果返回值为0,表示两…

为数据集而生的 SQL 控制台

随着数据集的使用量急剧增加,Hugging Face 社区已经变成了众多数据集默认存放的仓库。每月,海量数据集被上传到社区,这些数据集亟需有效的查询、过滤和发现。 Dataset Monthly Creations 每个月在 Hugging Face Hub 创建的数据集 我们现在非常…

modelscope下载Qwen2.5 72B 模型方法

conda create -n modelscope python=3.10 conda activate modelscopepip install modelscope执行这个python代码: from modelscope.hub.snapshot_download import snapshot_download# 下载模型到当前路径 model_dir = snapshot_download(

【Git】如何在 Git 中高效合并分支:完整指南

目录 引言1. 切换到主分支1.1 切换分支命令1.2 相关命令1.3 切换分支示意图 2. 合并分支2.1 基本合并命令2.2 合并选项2.3 合并流程示意图 3. 解决冲突3.1 解决冲突的步骤3.2 相关命令3.3 解决冲突示意图 4. 本地更新分支4.1 拉取远程更改4.2 更新主分支4.3 拉取远程更新到本地…

2024年计算机视觉与图像处理国际学术会议 (CVIP 2024)

目录 大会简介 主办单位,协办单位 组委会 主讲嘉宾 征稿主题 参会方式 会议议程 重要信息 会议官网:iccvip.org 大会时间:2024年11月15日-17日 大会地点:中国 杭州 大会简介 2024年计算机视觉与图像处理国际学术会议(C…

【D3.js in Action 3 精译_039】4.3 D3 面积图的绘制方法及其边界标签的添加

当前内容所在位置: 第四章 直线、曲线与弧线的绘制 ✔️ 4.1 坐标轴的创建(上篇) 4.1.1 D3 中的边距约定(中篇)4.1.2 坐标轴的生成(中篇) 4.1.2.1 比例尺的声明(中篇)4.1…

使用 PyCharm 构建 FastAPI 项目:零基础入门 Web API 开发

使用 PyCharm 构建 FastAPI 项目:零基础入门 Web API 开发 本文提供了一份完整的 FastAPI 入门指南,涵盖从环境搭建、依赖安装到创建并运行一个简单的 FastAPI 应用的各个步骤。通过 FastAPI 和 Uvicorn,开发者可以快速构建现代化的 Web API…

通过AI进行大数据分析,提示广告投放效果,优衣库的AI实践

大家好,我是Shelly,一个专注于输出AI工具和科技前沿内容的AI应用教练,体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具,拥抱AI时代的到来。 AI工具集1:大厂AI工具【共23款…

Python小白学习教程从入门到入坑------第二十四课 继承(语法进阶)

一、继承 继承就是让类和类之间转变为父子关系,子类默认继承父类的属性和方法 在Python中,继承是一个非常强大的特性,它允许我们创建一个新的类(称为子类),这个新类可以继承另一个类(称为父类…

【django】RESTful API 设计指南

目录 一、协议 二、域名 三、版本(Versioning) 四、路径(Endpoint) 五、HTTP动词 5.1 CRUD操作: 5.2 其他动词: 六、过滤信息(Filtering) 七、状态码(Status Co…

【综合算法学习】(第十六篇)

目录 岛屿的最⼤⾯积(medium) 题目解析 讲解算法原理 编写代码 被围绕的区域(medium) 题目解析 讲解算法原理 编写代码 岛屿的最⼤⾯积(medium) 题目解析 1.题目链接:. - 力扣&#xf…

django的一些文件

~~~settings.py~~~ # 接口文档相关配置 REST_FRAMEWORK{ DEFAULT_SCHEMA_CLASS: rest_framework.schemas.coreapi.AutoSchema, } ~~~urls.py~~~ from rest_framework.documentation import include_docs_urls # 模块coreapi,只针对drf的接口文档 path(api-docs/, i…

qt QTabWidget详解

1、概述 QTabWidget是Qt框架中的一个控件,它提供了一个标签页式的界面,允许用户在不同的页面(或称为标签)之间切换。每个页面都可以包含不同的内容,如文本、图像、按钮或其他小部件。QTabWidget非常适合用于创建具有多…

用ChatGPT提升工作效率:从理论到实际应用

伴人工智能技术的迅速演进,像ChatGPT这类语言模型已成为提升工作效率的关键工具。这类模型不仅具备处理海量数据的能力,还能自动化许多日常任务,从而提高决策的准确性。本文将深入探讨如何在工作中利用ChatGPT等AI工具提升效率,涵…

VScode调试

VScode只是一个代码编辑器,下面我们使用VScode调试运行在远端连接Linux服务器的代码。 打断点 编译代码,要确保已经安装gdb,可以使用指令gdb --version 来检查 GDB 是否已安装以及安装的版本,确认安装后在编译时要加上选项&…

成都睿明智科技有限公司正规吗靠谱吗?

在这个短视频风起云涌的时代,抖音电商以其独特的魅力,成为了无数商家竞相追逐的新蓝海。而在这片浩瀚的商海中,成都睿明智科技有限公司犹如一艘装备精良的航船,引领着众多企业破浪前行,探索抖音电商的无限可能。今天&a…

Web Broker(Web服务应用程序)入门教程(1)

1、介绍 Web Broker 组件(位于工具面板的“Internet”选项卡中)可以帮助您创建与特定统一资源标识符(URI)相关联的事件处理程序。当处理完成后,您可以通过编程方式构建 HTML 或 XML 文档,并将它们传输给客…

PySpark Yarn集群模式

目录 简介 一、PySpark简介 二、YARN模式概述 三、配置环境 1. 安装与配置Spark 2. 配置Hadoop和YARN 3. 启动yarn 四、编写PySpark脚本 五、提交PySpark作业到YARN 参数解释: 六、常见问题及解决 七、总结 简介 随着大数据的普及,Spark作为…

<HarmonyOS第一课>HarmonyOS SDK开放能力简介的课后习题

不出户&#xff0c;知天下&#xff1b; 不窥牖&#xff0c;见天道。 其出弥远&#xff0c;其知弥少。 是以圣人不行而知&#xff0c;不见而明&#xff0c;不为而成。 本篇<HarmonyOS第一课>HarmonyOS SDK开放能力简介是简单介绍了HarmonyOS SDK&#xff0c;不需要大家过多…