react BrowserRouter和HashRouter的区别

最新推荐文章于 2024-08-25 08:54:43 发布
最新推荐文章于 2024-08-25 08:54:43 发布
阅读量586 收藏 2
点赞数 1
分类专栏： 前端 react 文章标签： 前端 大前端 react reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44607531/article/details/113981483
版权

react中有两种路由模式，即BrowserRouter和HashRouter

BrowserRouter 借用了H5的history API

HashRouter借用了url的hash值

两者有何不同点呢？

1、表现形式不同 

      hash地址栏带#

2、兼容性不同。
      browser由于h5的history API，不兼容IE9及以下
      而hash使用的是url的哈希值兼容性好

3、刷新对路由state参数的影响
       browser没有影响，state保存在了history对象中
       hash刷新后导致路由state参数丢失

无聊人_
关注
专栏目录
BrowserRouter和HashRouter
weixin_42260975的博客
03-17 1325
react-router之BrowserRouter和HashRouter 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ 一、BrowserRouter BrowserRouter主要使用在浏览器...
随时记|React-Router中的HashRouter和BrowserRouter
weixin_49179577的博客
02-24 2236
什么是react-router 前端路由实现方式 路由需要实现三个功能： 当浏览器地址变化时，切换页面； 点击浏览器后退，前进按钮，网页内容发生变化； 刷新浏览器，页面加载内容对应当前路由对应的地址； 在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。 hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。 history 模式：利用H5 history API实现url地址改
浅谈react-router HashRouter和BrowserRouter的使用
08-28
本篇文章主要介绍了浅谈react-router HashRouter和BrowserRouter的使用，具有一定的参考价值，有兴趣的可以了解一下
react-router下browserRouter与hashRouter的区别
u010007013的博客
03-23 1244
先说结论： 二者的最大区别就是hashRouter不支持location.key 、location.state。 举例说明： homepage this.props.history.push({ pathname:'/about', state:{ msg:'this is a msg from home' } }) aboutpage console.log(JSON.s...
React Native Browser 使用教程
最新发布
gitblog_01091的博客
08-25 437
React Native Browser 使用教程 react-native-browserFull-featured web browser module for React Native apps, based on TOWebViewController项目地址:https://gitcode.com/gh_mirrors/re/react-native-browser 项目介绍 Reac...
【react】react中BrowserRouter和HashRouter的区别：
SunPeng的博客
08-06 1187
【react】react中BrowserRouter和HashRouter的区别：
react里面BrowserRouter与HashRouter的区别
m0_59070120的博客
05-15 233
1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRo...
BrowserRouter 与 HashRouter的区别
YaNglIN123i的博客
07-18 346
BrowserRouter使用的是h5的historyAPI，不兼容IE9及以下版本。BrowserRouter没有任何影响，因为state保存在history对象中。HashRouter刷新后会导致路由state参数丢失。BrowserRouter的路径中没有#，HashRouter使用的是URl哈希值。HashRouter的路径中存在#...
react-4（路由、路由机制、BrowserRouter/HashRouter、api路由跳转）
weixin_45626517的博客
08-09 605
react组件库：ant-design，antV AntD Admin：基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践 github地址：https://gitee.com/mirrors/AntD-Admin 演示地址：https://antd-admin.zuiidea.com (用户名和密码都是guest） 一、路由 hash路由：（推荐） localhost:3000/#/student (--后面有#号的) 浏览器路由： l...
BrowserRouter和HashRouter的区别
Xue_BT的博客
10-04 333
BrowserRouter和HashRouter的区别
BrowserRouter与HashRouter的区别
weixin_59489521的博客
03-16 2712
1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRouter的路径包含#,例如：localhost:3000/#/demo/test 3.刷新后对路由s...
HashRouter与 BrowserRouter的区别
m0_45382009的博客
03-13 7683
1.原理上 HashRouter： 在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter） BrowserRouter： 使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。 2.用法上 BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信 HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。 3.生产实践上 H
React中的BrowserRouter 和HashRouter的区别
艾米的猫儿的博客
04-26 203
React中HashRouter与 BrowserRouter的区别
weixin_57913339的博客
10-02 223
React中HashRouter与 BrowserRouter的区别
React-38：BrowserRouter与HashRouter的区别
Always-Learning
04-13 219
区别一：底层原理不同 BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 区别二：URL表现形式不一样 BrowserRouter的路径中没有# HashRouter的路径中包含# 区别三：刷新后对路由state参数的影响 刷新后BrowserRouter没有任何影响，因为state保存在history对象中。 HashRouter刷新后会导致路由state参数的丢失。 ...
react中BrowserRouter和HashRouter的两种路由模式区别
qq_63099565的博客
06-03 2240
一、react中有两种路由模式：1.BrowserRouter 浏览器历史记录路由: 使用H5的history API2.HashRouter 哈希路由: 使用url的hash值二、BrowserRouter和HashRouter的不同点1.兼容性不同2.表现形式不同3.刷新对路由state参数的影响...
react-router-dom中的BrowserRouter和HashRouter和link与Navlink
weixin_30496431的博客
09-23 947
HashRouter包裹下访问根服务: 假设为localhost:3000/ import { HashRouter as Router, Route, Redirect } from 'react-router-dom'; // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改...
React-37：BrowserRouter与HashRouter的区别
臧小川的博客
08-29 211
区别一：底层原理不同 BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 区别二：URL表现形式不一样 BrowserRouter的路径中没有# HashRouter的路径中包含# 区别三：刷新后对路由state参数的影响 刷新后BrowserRouter没有任何影响，因为state保存在history对象中。 HashRouter刷新后会导致路由state参数的丢失。 ...
browserrouter和hashrouter
03-16
BrowserRouter和HashRouter都是React Router库中的路由器组件，用于实现前端路由。 BrowserRouter使用HTML5的history API来实现路由，可以实现无刷新页面跳转，但需要服务器端支持。而HashRouter使用URL的hash值来...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值