vue router hash和history的区别_react-router-v4
转自:react-router和react-router-dom的区别 - lanyan - 博客园
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
标签,"https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js#L76">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就可以了。
vue router hash和history的区别_react-router-v4相关推荐
- vue路由的两种模式:hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况 直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
- vue router 的两种路由模式hash与history的区别
文章目录 两种模式 特点 总结 两种模式 前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
- 【面试】前端路由hash和history的区别
- Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫
1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...
- Vue router 模式 hash 和 history
目录 Vue router 基本使用 Vue-router 传参 hash 模式 Vue-router hash history 模式 Vue router 基本使用 用 Vue + Vue Rout ...
- VueRouter — vue路由hash模式和history模式
目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认 ...
- vue-router的两种模式(hash和history)及区别
为什么要有hash 和history? 对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义.前端路由的核心,就在于--改变试图 ...
- “约见”面试官系列之常见面试题第二十六篇之vue-router的hash和history(建议收藏)
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Vue-router 中hash模式和hi ...
- Vue路由Hash模式分析
Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...
- vue3中路由hash与History的设置
1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const rou ...
最新文章
- python主辅线程_python主线程捕获子线程的方法
- 1、时间、FHS 学习笔记
- vue token 过期处理
- 【机器学习入门笔记4:OpenCV图片的写入和不同图片质量保存】20190203
- MySql 中文乱码排查解决方案
- rest spring_Spring REST:异常处理卷。 2
- ulua 动态反射在IOS上的问题
- ios 上传图片失败 小程序_微信小程序ios端 使用ajaxSubmit上传图片失败,android没问题...
- 大话css预编译处理(二)安装使用篇
- mysql新浪微盘_Android62期视频教程全集下载
- Linux shell编程中read参数说明
- IPv6邻居状态与邻居检测机制
- Confluence 6 配置边栏
- MATLAB 生成随机数
- Unity3d进阶学习(9)-- 本地化Localization
- 慢就是快的人生哲理_感悟人生:慢是一种心态
- 【Pytorch】torch.Tensor.masked_fill()
- 迈向智能世界2030的九大技术挑战与研究方向
- nrf uart for android,nRF Toolbox for BLE
- 20160829-你拥有的最宝贵的财富是什么?