当前位置: 首页 > 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。



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

http://www.lryc.cn/news/477060.html

相关文章:

  • 【研究生必看】把选题和文献交给AI,轻松搞定毕业论文!
  • Android中同步屏障(Sync Barrier)介绍
  • 真·香!深度体验 zCloud 数据库云管平台 -- DBA日常管理篇
  • 优雅的遍历JSONArray,获取里面的数据
  • C#:强大而优雅的编程语言
  • 一个由Deno和React驱动的静态网站生成器
  • Python pyautogui库:自动化操作的强大工具
  • 【HTML】——VSCode 基本使用入门和常见操作
  • 从0开始搭建一个生产级SpringBoot2.0.X项目(八)SpringBoot 使用Redis
  • Ubuntu20.04两种安装及配置中文界面、输入法、换源、共享文件夹实现,及注意事项
  • 后端Java学习:springboot之文件上传(阿里云OSS存储)
  • python通过lunarcalendar库使用农历日期
  • MySQL高级--范式与反范式
  • 实验05多重循环---7-02 打印矩形图案
  • 明源地产ERP WFWebService.asmx 反序列化RCE漏洞复现
  • 学习笔记:黑马程序员JavaWeb开发教程(2024.11.4)
  • 开源自托管数据管理工具全面指南
  • 护工系统|护工陪护软件|护工系统设计
  • 电商领域软件系统实战:基于TiDB的分布式数据库应用
  • 鸢尾博客项目开源
  • Google封号潮来袭!跨境卖家如何解封?
  • 路径规划 | ROS中多个路径规划算法可视化与性能对比分析
  • 使用 PyCharm 构建 FastAPI 项目:零基础入门 Web API 开发
  • Prim算法与Dijstra算法
  • 水经微图IOS版5.6.1发布,新增图源二维码分享并修订徒步模式功能
  • 复现第三周
  • Django---数据库(多表关联)
  • 2024系统架构师---论软件可靠性设计及其应用论文
  • SpringBoot在线教育系统:云部署策略
  • Zabbix 6.0 部署