react-router和react-router-dom的区别
RR4 本次采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:
react-router
React Router 核心react-router-dom
用于 DOM 绑定的 React Routerreact-router-native
用于 React Native 的 React Routerreact-router-redux
React Router 和 Redux 的集成react-router-config
静态路由配置的小助手
引用
react-router 还是 react-router-dom?
在 React 的使用中,我们一般要引入两个包,react
和 react-dom
,那么 react-router
和react-router-dom
是不是两个都要引用呢?
非也,坑就在这里。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link>
<BrowserRouter>
这样的 DOM 类组件。
因此我们只需引用 react-router-dom
这个包就行了。当然,如果搭配 redux ,你还需要使用 react-router-redux
。
react-router-v4
,我称之为“第四代react-router”,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
标签行; BrowserRouter
和HashRouter
组件,前者使用pushState
和popState
事件构建路由,后者使用window.location.hash
和hashchange
事件构建路由。
react-router-native
: 基于react-router
,类似react-router-dom
,加入了react-native
运行环境下的一些功能。
从源码层面来说明:
首先看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
组件,然后重新导出而已。
查看其他模块的源码,Route
组件的源码Router
组件的源码
...
和Swtich
一样,都是从react-router
中导入了相应的组件,重新导出而已,并没有对实现做什么特殊处理。
结论:
react-router-dom
依赖react-router
,所以我们使用npm
安装依赖的时候,只需要安装相应环境下的库即可,不用再显式安装react-router
。- 基于浏览器环境的开发,只需要安装
react-router-dom
;基于react-native
环境的开发,只需要安装react-router-native
。 npm
会自动解析react-router-dom
包中package.json
的依赖并安装。
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
。
- 所以,回到最开始的写法。基于浏览器环境的开发,写法1就可以了。
react-router和react-router-dom的区别的更多相关文章
- react 创建项目 sass router redux
创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- React源码解析-Virtual DOM解析
前言:最近一直在研究React,看了陈屹先生所著的深入React技术栈,以及自己使用了这么长时间.对React应该说有比较深的理解了,正好前阵子也把两本关于前端设计模式的书看完了,总感觉有一种知识错综 ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- 深刻理解 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入门-JSX和虚拟dom
1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- React之深入了解虚拟DOM
JS在手机中也可运行,React Native通过将虚拟DOM转换为底层的原生组件,即可在手机端运行,在浏览器运行时,只需要将虚拟DOM转换为真实DOM即可运行,虚拟DOM就是将真实DOM转换为JS对 ...
随机推荐
- Python进入后台界面(admin)设定
前言 用过Django框架的童鞋肯定都知道,在创建完Django项目后,每个app下,都会有一个urls.py文件,里边会有如下几行: ※特别要注意下面标红颜色的部分[] 一般情况下不需要修改什么东西 ...
- Python中最常见的10个问题(列表)
列表是Python中使用最多的一种数据结果,如何高效操作列表是提高代码运行效率的关键,这篇文章列出了10个常用的列表操作,希望对你有帮助. 1.迭代列表时如何访问列表下标索引 普通版: items = ...
- Mongodb: com.mongodb.MongoSocketReadException: Prematurely reached end of stream
saveLocationInfo errorcom.mongodb.MongoSocketReadException: Prematurely reached end of stream at com ...
- SpringBoot(三)手写starter pom自动配置
思想:主要是EnableAutoConfiguration在启动的时候会扫描spring.factories并加载 1在resource下面新建META-INF/spring.factories 2在 ...
- 服务提供者框架讲解 之 myJDBC
利用一个简单的myJDBC,讲一下'服务提供者框架'的思想.主要是思想 目录 什么是 服务提供者框架 代码讲解 服务接口 服务提供者接口 服务注册API.服务访问API 静态工厂方法 服务实现类 – ...
- docker部署mysql,nginx,php,并上传镜像到私有仓库
前言 最近公司准备把现有环境全部搞成容器化,所以笔者就先了解了一下docker,并搞了一搞,并把自己搞的过程记录下来.话不多说直接开干 环境说明 Centos7 Docker version 18.0 ...
- MogileFS与spring结合
一.通过Maven添加MogileFS的Java客户端驱动包 <dependency> <groupId>fm.last</groupId> <artifac ...
- Hinton胶囊网络后最新研究:用“在线蒸馏”训练大规模分布式神经网络
Hinton胶囊网络后最新研究:用“在线蒸馏”训练大规模分布式神经网络 朱晓霞发表于目标检测和深度学习订阅 457 广告关闭 11.11 智慧上云 云服务器企业新用户优先购,享双11同等价格 立即抢购 ...
- 使用vue-cli创建vue工程
在Windows环境下,打开命令行窗口,跳转至想创建工程的路径. 如:D:\MyWork\22_Github\rexel-cn\rexel-jarvis 创建vue工程,命令:vue create r ...
- WebSocket协议探究(二)
一 复习和目标 1 复习 协议概述: WebSocket内置消息定界并且全双工通信 WebSocket使用HTTP进行协议协商,协商成功使用TCP连接进行传输数据 WebScoket数据格式支持二进制 ...