react-router与react-router-dom使用时的区别
1、React-router与React-router-dom的API对比
React-router:提供了router的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的ap;
React-router-dom:提供了BrowserRouter、Route、Link等api,可以通过dom操作触发事件控制路由。
2、React-router与React-router-dom的功能对比
React-router:实现了路由的核心功能
React-router-dom:基于React-router,加入了一些在浏览器运行下的一些功能,
例如:Link
组件会渲染一个a标签,
BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步,
HashRouter使用 URL 的 hash
部分保证你的 UI 界面和 URL 保持同步
3、React-router与React-router-dom的写法对比
React-router不能通过操作dom控制路由,此时还需引入React-router-dom
import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';
React-router-dom在React-router的基础上扩展了可操作dom的api
import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';
4、React-router与React-router-dom的路由跳转对比
React-router:router4.0以上版本用this.props.history.push('/path')实现跳转;
router3.0以上版本用this.props.router.push('/path')实现跳转
React-router-dom:直接用this.props.history.push('/path')就可以实现跳转
总结:
在使用React的大多数情况下,我们会想要通过操作dom来控制路由,例如点击一个按钮完成跳转,这种时候使用React-router-dom就比较方便。
安装也很简单:npm install react-router-dom --save
从react-router-dom
中package.json的
依赖就可以看出:react-router-dom是
依赖react-router的
,所以我们使用npm
安装react-router-dom的时候,不需要npm安装react-router。
//react-router-dom的依赖
"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"
}
-THE END-
react-router与react-router-dom使用时的区别的更多相关文章
- IEnumerable和IQueryable在使用时的区别
最近在调研数据库查询时因使用IEnumerable进行Linq to entity的操作,造成数据库访问缓慢.此文讲述的便是IEnumerable和IQueryable的区别. 微软对IEnumera ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- react 创建项目 sass router redux
创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...
- React入门-JSX和虚拟dom
1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...
- React源码解析-Virtual DOM解析
前言:最近一直在研究React,看了陈屹先生所著的深入React技术栈,以及自己使用了这么长时间.对React应该说有比较深的理解了,正好前阵子也把两本关于前端设计模式的书看完了,总感觉有一种知识错综 ...
- 深刻理解 React (一) ——JSX和虚拟DOM
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclou ...
- React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber,fiber不解读这个过程也不知道)
一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...
- React会自动把虚拟DOM数组展开
React会自动把虚拟DOM数组展开,放在父级虚拟DOM中,这个特性还是我同事帮我解决一个问题的时候,偶然发现的. 如何将一个数据数组转换为一个虚拟DOM的数组,需要使用map,如下: const n ...
- React之深入了解虚拟DOM
JS在手机中也可运行,React Native通过将虚拟DOM转换为底层的原生组件,即可在手机端运行,在浏览器运行时,只需要将虚拟DOM转换为真实DOM即可运行,虚拟DOM就是将真实DOM转换为JS对 ...
随机推荐
- 2月第3周业务风控关注|上海网信办复测23个被约谈APP 涉及1号店、小红书等
易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 1.上海网信办复测23个被约谈A ...
- 第八节:详细讲解Java中的异常处理情况与I/O流的介绍以及类集合框架
前言 大家好,给大家带来详细讲解Java中的异常处理情况与I/O流的介绍以及类集合框架的概述,希望你们喜欢 JAVA 异常 try...catch...finally结构的使用方法 class Tes ...
- SSH框架搭建过程详解
Spring.Struts2.Hibernate框架: 具体三大框架的知识以前的文章写过,在这里整合 Spring框架知识:http://www.cnblogs.com/xuyiqing/catego ...
- Linux下解压.tar.xz格式文件的方法
前言 对于xz这个压缩相信很多人陌生,但xz是绝大数linux默认就带的一个压缩工具,xz格式比7z还要小. 今天在下载Node.js源码包的时候遇到的这种压缩格式.查了一下资料,这里进行一下记录,分 ...
- python实现stack并测试
栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算. 这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新 元素放 ...
- 07-部署Flanneld网络
部署Flanneld网络 Flanneld:用于解决容器之间网络互通,这里我们要配置TLS认证. Docker1.12.5:docker的安装很简单,这里也不说了. 配置Flanneld 这里我们使用 ...
- 14-02 Java Math类,Random类,System类,BigDecimal类
Math类 Math的方法 package cn.itcast_01; /* * Math:用于数学运算的类. * 成员变量: * public static final double PI * pu ...
- Eclipse建立Java工程中的三个JRE选项的区别(Use an execution environment JRE,Use a project specific JRE,Use default JRE)
本博客部分转载自: http://blog.csdn.net/wdjhzw/article/details/42086615 这篇博客写的非常好,很用心. 一.首先看新建Java Project时候 ...
- Log4Net使用详解2
首先说明一点的是,log4net解决的问题是提供一个记录日志的框架,它提供了向多种目标写入的实现,比如利用log4net可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括MS ...
- 用node.js写一个jenkins发版脚本
背景 每次到网页里手动发版有点烦,写个脚本来提高开发效率. CFG 在 jenkins 设置里获取 API TOKEN. 把 host 和账号密码拼接起来就可以通过鉴权. const token = ...