转自:react-router和react-router-dom的区别 - lanyan - 博客园

RR4 本次采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:

  • react-router React Router 核心
  • react-router-dom 用于 DOM 绑定的 React Router
  • react-router-native 用于 React Native 的 React Router
  • react-router-redux React Router 和 Redux 的集成
  • react-router-config 静态路由配置的小助手

引用

react-router 还是 react-router-dom?

在 React 的使用中,我们一般要引入两个包,reactreact-dom,那么 react-routerreact-router-dom 是不是两个都要引用呢?
非也,坑就在这里。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了。当然,如果搭配 redux ,你还需要使用 react-router-redux

react-router-v4,我称之为“第四代react-router”,react-routerreact-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标签,"https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js#L76">Link组件源码a标签行; BrowserRouterHashRouter组件,前者使用pushStatepopState事件构建路由,后者使用window.location.hashhashchange事件构建路由。

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中导入了相应的组件,重新导出而已,并没有对实现做什么特殊处理。

结论:

  1. react-router-dom依赖react-router,所以我们使用npm安装依赖的时候,只需要安装相应环境下的库即可,不用再显式安装react-router
  2. 基于浏览器环境的开发,只需要安装react-router-dom;基于react-native环境的开发,只需要安装react-router-native
  3. npm会自动解析react-router-dom包中package.json的依赖并安装。

react-router-dompackage.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-domnpm会解析并安装上述依赖包。可以看到,其中包括react-router

所以,回到最开始的写法。基于浏览器环境的开发,写法1就可以了。

vue router hash和history的区别_react-router-v4相关推荐

  1. vue路由的两种模式:hash与history的区别

    前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况 直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...

  2. vue router 的两种路由模式hash与history的区别

    文章目录 两种模式 特点 总结 两种模式 前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...

  3. 【面试】前端路由hash和history的区别

  4. Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫

    1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...

  5. Vue router 模式 hash 和 history

    目录 Vue router 基本使用 Vue-router 传参 hash 模式 Vue-router hash history 模式 Vue router 基本使用 用 Vue + Vue Rout ...

  6. VueRouter — vue路由hash模式和history模式

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认 ...

  7. vue-router的两种模式(hash和history)及区别

    为什么要有hash 和history? 对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义.前端路由的核心,就在于--改变试图 ...

  8. “约见”面试官系列之常见面试题第二十六篇之vue-router的hash和history(建议收藏)

    这篇文章主要介绍了Vue-router 中hash模式和history模式的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Vue-router 中hash模式和hi ...

  9. Vue路由Hash模式分析

    Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...

  10. vue3中路由hash与History的设置

    1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const rou ...

最新文章

  1. python主辅线程_python主线程捕获子线程的方法
  2. 1、时间、FHS 学习笔记
  3. vue token 过期处理
  4. 【机器学习入门笔记4:OpenCV图片的写入和不同图片质量保存】20190203
  5. MySql 中文乱码排查解决方案
  6. rest spring_Spring REST:异常处理卷。 2
  7. ulua 动态反射在IOS上的问题
  8. ios 上传图片失败 小程序_微信小程序ios端 使用ajaxSubmit上传图片失败,android没问题...
  9. 大话css预编译处理(二)安装使用篇
  10. mysql新浪微盘_Android62期视频教程全集下载
  11. Linux shell编程中read参数说明
  12. IPv6邻居状态与邻居检测机制
  13. Confluence 6 配置边栏
  14. MATLAB 生成随机数
  15. Unity3d进阶学习(9)-- 本地化Localization
  16. 慢就是快的人生哲理_感悟人生:慢是一种心态
  17. 【Pytorch】torch.Tensor.masked_fill()
  18. 迈向智能世界2030的九大技术挑战与研究方向
  19. nrf uart for android,nRF Toolbox for BLE
  20. 20160829-你拥有的最宝贵的财富是什么?

热门文章

  1. fescar(Seata)详解
  2. GNS3中RIP的过滤和修改
  3. NetApp F3020 盘柜报警升级修复全过程
  4. AKM项目轶事之GBS同事转入GDC
  5. List的ToLookup 分组方法
  6. 30天敏捷结果(14):要事第一
  7. 图解Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN
  8. linux客户端掉线重连,SSH自动断开后重连的解决方案
  9. java string内部实现_Redis知识总结--string的内部实现
  10. 复合类型_22.scala的复合类型