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对 ...
随机推荐
- Android开发 - 更"聪明"的申请权限方式
在Android6.0以后,很多权限需要动态申请,只有在用户点同意后,我们才能使用对应API,因此,正确申请权限就显得很重要. 常用方式 通常我们使用这种方式来判断权限状态: private stat ...
- XXE(XML External Entity attack)XML外部实体注入攻击
导语 XXE:XML External Entity 即外部实体,从安全角度理解成XML External Entity attack 外部实体注入攻击.由于程序在解析输入的XML数据时,解析了攻击者 ...
- 使用 Navicate 连接 Oracle9i 数据库
Navicat Premium 是一个可多重连接的数据库管理工具,它可让你以单一程序同時连接到 MySQL.SQLite.Oracle 及 PostgreSQL 数据库,让管理不同类型的数据库更加方便 ...
- 分布式任务调度系统xxl-job相关问题补充
搭建xxl-job时可能会遇到的问题 邮箱配置不起作用报异常 以163邮箱为例,接收邮件需要开启POP3/STMP服务 光开启服务还不够,需要添加授权码 授权码为手动输入,可以与登录密码不同,所以服务 ...
- Linux 系统资源管理-top-cpu
- 源码调试debug_info 的作用和使用方法
在他通过gcc来编译程序时,在map文件中,经常会遇到如下的情况: .debug_info 0x002191b6 0x1aa9 XXX .debug_info 0x0021ac5f 0xce4 XXX ...
- Shell - 文本处理
珠玉在前,不再赘言. 常用命令 LinuxShell文本处理工具集锦 数据工程师常用的Shell命令 文件和目录管理 简明教程 AWK简明教程 SED简明教程 命令详解 linux sort,uniq ...
- windows中的常用Dos命令
# __切换盘符目录__ E/D: # 从C盘切换到E盘或者D盘# __切换到指定文件夹下__cd folder_name(指定文件夹名--相对/绝对路径)cd .. # 返回上一级目录cd / # ...
- Base 64 加密、解密
1.写一个公共类 package com.boyutec.oss.sys.utils; import java.io.UnsupportedEncodingException; import java ...
- 用Eclipse导入Maven工程
步骤一 : 选择 “Import”操作 有两个途径可以选择 “Import”操作; 1>“File”--> "Import..." 2> 在 "Pro ...