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对 ...
随机推荐
- java类加载全过程
引用:http://blog.csdn.net/haluoluo211/article/details/49908463 http://www.cnblogs.com/pengfeiliu/p/442 ...
- jira邮箱配置
系统-邮件-外发邮件
- Python创建文件报错OSError:[Errno 22] Invalid argument处理
问题: windows平台下使用python open函数w模式打开文件报错“OSError: [Errno 22] Invalid argument: '../news/“消费升维”成零售业新风口? ...
- 并行forearch的使用及测试(Parallel.Foreach)
using System; using System.Collections.Generic; using System.Diagnostics; using System.Threading.Tas ...
- Beanshell post processor写文件
byte[] responseData = prev.getResponseData().; private String filePath = "F:/test.txt"; Bu ...
- Scala调用Kafka的生产者和消费者Demo,以及一些配置参数整理
kafka简介 Kafka是apache开源的一款用Scala编写的消息队列中间件,具有高吞吐量,低延时等特性. Kafka对消息保存时根据Topic进行归类,发送消息者称为Producer,消息接受 ...
- java--demo之猜拳游戏
版本1:人机大战 基础随机出 用户键盘录入 package com.hainiu.demo; import java.util.Scanner; /* * 人机大战石头剪刀布 */ publi ...
- 1254: 盒子游戏(Java)
WUSTOJ 1254: 盒子游戏 参考博客 叶剑飞Victor的博客 盒子游戏--爱程序网 原理是从上面博客看的,我另外补充了几幅图,方便理解 Description 有两个相同的盒子,其中一个装了 ...
- SysTick 定时实验(中断)
实验目的:利用 SysTick 产生 1s 的时基,LED 以 1s 的频率闪烁. 编程要点 1.设置重装载寄存器的值 2.清除当前数值寄存器的值 3.配置控制与状态寄存器 过程 我们创建了两个文件: ...
- ASP.NET Core启动流程
1. 引言 对于ASP.NET Core应用程序来说,我们要记住非常重要的一点是:其本质上是一个独立的控制台应用,它并不是必需在IIS内部托管且并不需要IIS来启动运行(而这正是ASP.NET Cor ...