React-37：BrowserRouter与HashRouter的区别

最新推荐文章于 2023-08-06 10:08:11 发布
最新推荐文章于 2023-08-06 10:08:11 发布
阅读量189 收藏
点赞数
分类专栏： react 文章标签： react.js
臧小川
本文链接：https://blog.csdn.net/chuan0106/article/details/119984680
版权
本文探讨了两种常见前端路由方案的区别：BrowserRouter基于H5 history API，不支持IE9以下，URL无#；而HashRouter利用URL哈希值，刷新后state丢失。了解它们的优劣有助于合理选择路由方式。
摘要由CSDN通过智能技术生成

区别一：底层原理不同

BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。

区别二：URL表现形式不一样

BrowserRouter的路径中没有#
HashRouter的路径中包含#

区别三：刷新后对路由state参数的影响

刷新后BrowserRouter没有任何影响，因为state保存在history对象中。
HashRouter刷新后会导致路由state参数的丢失。

臧小川
关注
专栏目录
BrowserRouter和HashRouter
weixin_42260975的博客
03-17 1301
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 2183
什么是react-router 前端路由实现方式 路由需要实现三个功能： 当浏览器地址变化时，切换页面； 点击浏览器后退，前进按钮，网页内容发生变化； 刷新浏览器，页面加载内容对应当前路由对应的地址； 在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。 hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。 history 模式：利用H5 history API实现url地址改
BrowserRouter与HashRouter的区别
weixin_59489521的博客
03-16 2694
1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRouter的路径包含#,例如：localhost:3000/#/demo/test 3.刷新后对路由s...
React -- BrowserRouter、HashRouter的区别
Sco_jing的博客
11-07 343
       今天在学习React路由时遇到了有关使用HashRouter与BrowserRouter例子，查询了有关二者的区别，还有HistroyRouter，故想用一篇博客记录一下 底层原理 HashRouter使用的是URL的哈希值，利用监听hashchange事件来前进后退 BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HistroyRouter 利用了 HTML5 History Interf
react中BrowserRouter和HashRouter的两种路由模式区别
qq_63099565的博客
06-03 2188
一、react中有两种路由模式：1.BrowserRouter 浏览器历史记录路由: 使用H5的history API2.HashRouter 哈希路由: 使用url的hash值二、BrowserRouter和HashRouter的不同点1.兼容性不同2.表现形式不同3.刷新对路由state参数的影响...
HashRouter与 BrowserRouter的区别
m0_45382009的博客
03-13 7624
1.原理上 HashRouter： 在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter） BrowserRouter： 使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。 2.用法上 BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信 HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。 3.生产实践上 H
ipfs-react-router：为IPFS部署的网站提供更好的React Router路由
02-02
中BrowserRouter或HashRouter的替代方法，它BrowserRouter通过为网站提供服务的方式来设置基本名称（网站根网址路径）。 使用IpfsRouter的站点可以通过以下所有IpfsRouter提供有效的路由： 开箱即用的...
浅谈react-router HashRouter和BrowserRouter的使用
08-28
"React Router HashRouter 和 BrowserRouter 使用详解" React Router 是一个基于 JavaScript 的路由库，提供了两种路由模式：HashRouter 和 BrowserRouter。这两种路由模式都可以实现客户端路由，但是它们的实现...
medium-react-navbar:使用React-Router的React Navbar。 也是文章的源代码-How to use the source code
03-24
3. **BrowserRouter或HashRouter**：这是React Router提供的两种主要的路由容器，它们监听浏览器的URL变化并处理路由。在这个项目中，可能是使用BrowserRouter，因为它更符合现代Web标准，但如果为了兼容旧浏览器，...
BrowserRouter和HashRouter的区别
yidianyuanzhidong的博客
06-27 138
原理 BrowserRouter 使用的是H5的history API方法（不兼容IE9以下） HashRouter 使用的是URL的哈希值 UR表现形式不同 BrowserRouter ：路径中没有#号，例如：localhost:3000/demo/test HashRouter ：路径中存在#号，例如：localhost:3000/#/test 刷新网页对state参数的影响 BrowserRouter ：没有任何影响，由于存在history中 HashRouter ：刷新state参数参数丢失 Has
react BrowserRouter和HashRouter的区别
weixin_44607531的博客
02-23 568
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 router中HashRouter和BrowserRouter的区别和使用场景
程序员良仔
05-08 8490
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
BrowserRouter 与 HashRouter的区别
YaNglIN123i的博客
07-18 322
BrowserRouter使用的是h5的historyAPI，不兼容IE9及以下版本。BrowserRouter没有任何影响，因为state保存在history对象中。HashRouter刷新后会导致路由state参数丢失。BrowserRouter的路径中没有#，HashRouter使用的是URl哈希值。HashRouter的路径中存在#...
【react】react中BrowserRouter和HashRouter的区别：
最新发布
SunPeng的博客
08-06 1165
【react】react中BrowserRouter和HashRouter的区别：
react-router-dom中的BrowserRouter和HashRouter和link与Navlink
weixin_30496431的博客
09-23 892
HashRouter包裹下访问根服务: 假设为localhost:3000/ import { HashRouter as Router, Route, Redirect } from 'react-router-dom'; // as的作用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,可以免去组件修改...
React-router:react-router的原理
07-24
1. **路由器（Router）：** React Router 提供了多种类型的路由器组件，如 `BrowserRouter`、`HashRouter` 等。路由器组件负责监听 URL 的变化，并将相应的路由信息传递给应用程序。 2. **路由规则（Route）：** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

臧小川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值