【React】BrowserRouter 与 HashRouter 的不同

最新推荐文章于 2025-05-27 23:35:22 发布
最新推荐文章于 2025-05-27 23:35:22 发布
阅读量138 收藏
点赞数
分类专栏： 前端 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hazelnut_x/article/details/119088461
版权
本文解析了BrowserRouter与HashRouter的工作原理，BrowserRouter利用H5 history API实现，不支持IE9以下版本；而HashRouter通过URL哈希值来工作。文章还讨论了两种路由在路径表现形式及刷新后对路由状态的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 底层原理
    • BrowserRouter 使用的是 H5 的 history API ，不兼容 IE9及以下版本
    • HashRouter 使用的是 URL 的哈希值
  • path 表现形式
    • BrowserRouter 路径中没有 #，如 localhost/test
    • HashRouter 路径中有 #，如 localhost/#/test 。 # 后的部分会在前端处理，不会传递给服务器
  • 刷新后对路由 state 参数的影响
    • BrowserRouter 没有任何影响，因为 state 会保存在 history 对象中
    • HashRouter 刷新后会导致路由 state 参数丢失
浅谈react-router HashRouter和BrowserRouter的使用
08-28
"React Router HashRouter 和 BrowserRouter 使用详解" React Router 是一个基于 JavaScript 的路由库，提供了两种路由模式：HashRouter 和 BrowserRouter。这两种路由模式都可以实现客户端路由，但是它们的实现...
react相关问题
Mia的博客
08-13 822
严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。 this.setState({isHot:!isHot})
【react】react中BrowserRouter和HashRouter的区别：
SunPeng的博客
08-06 1225
【react】react中BrowserRouter和HashRouter的区别：
BrowserRouter与HashRouter的区别
weixin_38222276的博客
04-16 344
1.刷新后对路由state参数的影响 1.BrowserRouter没有任何影响，因为state保存在history对象中 2.HashRouter刷新后会导致路由state参数的丢失 2.底层原理不一样： BrowserRouter使用的时H5的historyAPI,不兼容ie9及以下版本， HashRouter使用的是RUL的哈希值 3.表现形式不一样 BrowserRouter的路径中没有#， HashRout...
react BrowserRouter和HashRouter的区别
weixin_44607531的博客
02-23 617
react中有两种路由模式，即BrowserRouter和HashRouter BrowserRouter 借用了H5的history API HashRouter借用了url的hash值 两者有何不同点呢？ 1、表现形式不同 hash地址栏带# 2、兼容性不同。 browser由于h5的history API，不兼容IE9及以下 而hash使用的是url的哈希值兼容性好 3、刷新对路由state参数的影响 browser没有影响，state...
react中BrowserRouter与HashRouter的区别
sun~的博客
10-19 257
BrowserRouter与HashRouter的区别
react里面BrowserRouter与HashRouter的区别
m0_59070120的博客
05-15 251
1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRo...
React BrowserRouter和HashRouter的区别
weixin_48253922的博客
08-31 1188
React BrowserRouter和HashRouter的区别 BrowserRouter：h5路由（history API） HashRouter：哈希路由 主要区别 BrowserRouter 和 HashRouter 都可以实现前端路由的功能 BrowserRouter 实现的是单页面的路由切换 HashRouter 实现的是全局路由切换 从原理上 HashRouter在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦）） 而Brow
React - 路由模式 BrowserRouter 和 HashRouter 的区别与使用
技术共享，共同进步！
09-07 1090
React - 路由模式 BrowserRouter 和 HashRouter 的区别与使用
React-38：BrowserRouter与HashRouter的区别
Always-Learning
04-13 239
区别一：底层原理不同 BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 区别二：URL表现形式不一样 BrowserRouter的路径中没有# HashRouter的路径中包含# 区别三：刷新后对路由state参数的影响 刷新后BrowserRouter没有任何影响，因为state保存在history对象中。 HashRouter刷新后会导致路由state参数的丢失。 ...
BrowserRouter 与 HashRouter 区别
03-14
BrowserRouter 和 HashRouter 都是 React Router 中的路由组件，它们的主要区别在于 URL 的格式不同。BrowserRouter 使用 HTML5 的 history API，URL 中不包含 #，而 HashRouter 使用 URL 中的 hash（#）
browserrouter和hashrouter
03-16
BrowserRouter和HashRouter都是React Router库中的路由器组件，用于实现前端路由。 BrowserRouter使用HTML5的history API来实现路由，可以实现无刷新页面跳转，但需要服务器端支持。而HashRouter使用URL的hash值来...
Java防止重复提交全解析：原理、场景与实战方案
学海无涯，行者无疆
05-26 642
重复提交是指用户在短时间内多次发送相同请求到服务端，导致数据被多次处理的现象。常见原因包括用户多次点击提交按钮、浏览器刷新或回退后重新提交、网络延迟导致客户端重复发送请求等。重复提交可能导致数据库产生重复数据、业务逻辑异常以及服务器资源浪费。解决方案包括前端控制（如禁用按钮、防抖函数）、Token令牌机制、基于AOP+注解的防重提交以及数据库层防护（如唯一索引、乐观锁）。方案选型应根据具体场景，推荐组合使用前端防抖、Token机制、AOP+Redis注解和数据库唯一约束，以提升系统健壮性。
SpringMVC（结合源码浅析工作流程）
weixin_45865163的博客
05-23 783
Spring MVC是基于前端控制器（）设计模式的 Web 框架，在 Web 应用中指一个统一的入口，用来接收所有客户端请求，并统一进行分发、处理。在SpringMVC中，前端控制器就是Controller。
优雅草最新实战项目技术Discuz X3.5电子签约插件开发项目实施方案优雅草·卓伊凡
最新发布
一颗优雅草科技-央千澈的优快云博客~只想无穷无尽的学习~作息早8-晚8
05-27 1026
优雅草科技将为DiscuzX3.5系统开发电子签约插件，预算9,300元，工期35天。项目采用PHP7.4+e签宝SDK技术栈，实现合同发起、签署、模板管理等功能。包含UI设计、前端开发（响应式页面）、后端插件开发及文档培训。技术方案重点包括：集成e签宝API，新建签约记录数据表，开发后台管理界面，并确保与Discuz原生系统无缝集成。项目采用模块化开发，优先保障核心签约流程，提供3个月维护期。
DOM事件的传播机制
前端小巷子的博客
05-25 857
在前端开发中，DOM事件的传播机制是实现用户交互的核心概念之一。理解事件的传播过程不仅可以帮助我们更好地管理事件，还能优化代码性能，避免潜在的错误。
[Vue]路径跳转和路由高级设置
m0_74217128的博客
05-22 1093
编程式导航实际意思是，通过用户的一些操作来实现页面的跳转，例如登录成功后跳转个人首页等等。指的是我们网页中嵌套了其他的网页资源，换到编程的视角就是父子组件。比如某个产品的网站，上边一个导航栏，中间是各种不同内容的分页。2.通过router对象的push方法，上传我们的路径信息（当然，一般会写在方法里面，通过事件触发）。2.在主页面中使用标签<router-view></router-view>，用于布置嵌套的页面资源。在这里，每次跳转传递的都是固定的路径信息，浏览器拿到的就是to属性对应的字符串。
MD5加密（Java）
weixin_51118573的博客
05-24 373
本文针对数据库中明文存储密码的安全隐患，提出使用MD5加密的解决方案。首先将数据库中的密码替换为MD5加密后的密文，然后在Java代码中使用Spring Boot的DigestUtils工具类对用户提交的明文密码进行MD5加密（md5DigestAsHex方法），再与数据库中的密文进行比对。 MD5加密具有不可逆性，只能通过加密明文来验证密码，无法从密文还原出原始密码，从而提升了系统安全性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值