BrowserRouter与HashRouter的区别

最新推荐文章于 2025-03-23 17:48:08 发布
最新推荐文章于 2025-03-23 17:48:08 发布
阅读量270 收藏
点赞数
分类专栏： react 笔记 文章标签： reactjs javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yeee1128/article/details/115727083
版权
本文详细介绍了BrowserRouter和HashRouter两种React路由的底层原理、路径表现形式、刷新后对路由状态的影响，以及HashRouter在解决路径错误问题上的应用。重点讨论了它们在不同场景下的适用性和优缺点。

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

1.底层原理不一样
BrowserRouter使用的是H5 history API,不兼容IE9与一下版本
HashRouter使用的是URL的哈希值
2.path表现形式不一样
BrowserRouter路径中没有#，例如：localhost:3000/demo/text
HashRouter路径中包含#，例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
BrowerRouter没有任何影响，因为state保存在history对象中。
HashRouter刷新后会导致路由state参数丢失
4.备注：HashRouter可以用于解决一些路径错误相关问题

BrowserRouter和HashRouter
weixin_42260975的博客
03-17 1346
react-router之BrowserRouter和HashRouter 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ 一、BrowserRouter BrowserRouter主要使用在浏览器...
浅谈react-router HashRouter和BrowserRouter的使用
08-28
本篇文章主要介绍了浅谈react-router HashRouter和BrowserRouter的使用，具有一定的参考价值，有兴趣的可以了解一下
HashRouter与 BrowserRouter的区别
m0_45382009的博客
03-13 7756
1.原理上 HashRouter： 在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter） BrowserRouter： 使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。 2.用法上 BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信 HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。 3.生产实践上 H
HashRouter和BrowserRouter对比
最新发布
weixin_59742742的博客
03-23 450
查询参数在 # 号后 → 用 useSearchParams() 或手动解析 window.location.hash。直接用 useSearchParams() 或 window.location.search 解析，无需特殊处理。直接使用useSearchParams或者使用window.location.search都可以。查询参数在 # 号前 → 用 window.location.search 解析。如果是 BrowserRouter。如果是 HashRouter。
BrowserRouter和HashRouter的区别
Xue_BT的博客
10-04 403
BrowserRouter和HashRouter的区别
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值来...
详解react-router 4.0 下服务器如何配合BrowserRouter
08-28
BrowserRouter 和 HashRouter 都可以实现前端路由的功能，区别是前者基于 URL 的 pathname 段，后者基于 hash 段。在使用 BrowserRouter 时，需要服务器配合前端做一些简单的修改，以避免前端路由被发送到后台。 ...
BrowserRouter 与 HashRouter的区别
YaNglIN123i的博客
07-18 371
BrowserRouter使用的是h5的historyAPI，不兼容IE9及以下版本。BrowserRouter没有任何影响，因为state保存在history对象中。HashRouter刷新后会导致路由state参数丢失。BrowserRouter的路径中没有#，HashRouter使用的是URl哈希值。HashRouter的路径中存在#...
React-37：BrowserRouter与HashRouter的区别
臧小川的博客
08-29 239
区别一：底层原理不同 BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 区别二：URL表现形式不一样 BrowserRouter的路径中没有# HashRouter的路径中包含# 区别三：刷新后对路由state参数的影响 刷新后BrowserRouter没有任何影响，因为state保存在history对象中。 HashRouter刷新后会导致路由state参数的丢失。 ...
react中BrowserRouter和HashRouter的两种路由模式区别
qq_63099565的博客
06-03 2332
一、react中有两种路由模式：1.BrowserRouter 浏览器历史记录路由: 使用H5的history API2.HashRouter 哈希路由: 使用url的hash值二、BrowserRouter和HashRouter的不同点1.兼容性不同2.表现形式不同3.刷新对路由state参数的影响...
react router中HashRouter和BrowserRouter的区别和使用场景
程序员良仔
05-08 8782
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
react-router下browserRouter与hashRouter的区别
u010007013的博客
03-23 1270
先说结论： 二者的最大区别就是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...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值