BrowserRouter和HashRouter的区别

最新推荐文章于 2023-09-04 15:17:44 发布
最新推荐文章于 2023-09-04 15:17:44 发布
阅读量257 收藏
点赞数
分类专栏： react学习记录 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xue_BT/article/details/127154810
版权

1、底层原理不同

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

2、path表现形式不一样

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

3、刷新后对路由state参数的影响

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

4、HashRouter可以用于解决一些路径错误相关的问题

爱吃猪蹄_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HashRouter与 BrowserRouter的区别
m0_45382009的博客
03-13 7564
1.原理上 HashRouter： 在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter） BrowserRouter： 使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。 2.用法上 BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信 HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。 3.生产实践上 H
react BrowserRouter和HashRouter的区别
weixin_44607531的博客
02-23 533
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】react中BrowserRouter和HashRouter的区别：
SunPeng的博客
08-06 1089
【react】react中BrowserRouter和HashRouter的区别：
BrowserRouter与HashRouter的区别
weixin_38222276的博客
04-16 286
1.刷新后对路由state参数的影响 1.BrowserRouter没有任何影响，因为state保存在history对象中 2.HashRouter刷新后会导致路由state参数的丢失 2.底层原理不一样： BrowserRouter使用的时H5的historyAPI,不兼容ie9及以下版本， HashRouter使用的是RUL的哈希值 3.表现形式不一样 BrowserRouter的路径中没有#， HashRout...
浅谈react-router HashRouter和BrowserRouter的使用
08-28
"React Router HashRouter 和 BrowserRouter 使用详解" React Router 是一个基于 JavaScript 的路由库，提供了两种路由模式：HashRouter 和 BrowserRouter。这两种路由模式都可以实现客户端路由，但是它们的实现...
详解react-router 4.0 下服务器如何配合BrowserRouter
08-28
BrowserRouter 和 HashRouter 都可以实现前端路由的功能，区别是前者基于 URL 的 pathname 段，后者基于 hash 段。在使用 BrowserRouter 时，需要服务器配合前端做一些简单的修改，以避免前端路由被发送到后台。 ...
Laravel-React:入门包结合了React和Laravel路线
05-11
- **创建React组件**：开发React组件，包括路由组件，如`App.js`，其中包含`BrowserRouter`或`HashRouter`以及各个子`Route`组件。 - **配置Laravel路由**：在`routes/web.php`中设置一个简单的路由，返回`app.blade...
React-Router中的HashRouter和BrowserRouter
lin_uil的博客
08-30 440
前端路由实现方式路由需要实现三个功能：当浏览器地址变化时，切换页面；点击浏览器后退，前进按钮，网页内容发生变化；刷新浏览器，页面加载内容对应当前路由对应的地址；在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。history 模式：利用H5 history API实现url地址改变，网页内容改变。
react HashRouter 与 BrowserRouter 的区别及使用场景
最新发布
卡尔特斯
09-04 1422
在单页面应用中，如何在切换页面后，不刷新浏览器呢？为了解决这个问题，有两种方法，就是hash路由模式history路由模式，而的两种路由就是使用这两种路由模式。
hashHistory和browserHistory的区别
weixin_43552879的博客
10-21 382
HashHistory和BrowserHistory都是history库中定义的类，可以通过history库中的createHashHistory和createBrowserHistory方法分别创建hashHistory和browserHistory对象，且都是单例对象。这两者都是通过对window.history对象和window.location对象的封装，衍生出更多丰富的功能，使我们能更好的操作浏览器的历史记录，比如使用history库可以实现阻止跳转，以及定义跳转提示
react-router下browserRouter与hashRouter的区别
u010007013的博客
03-23 1224
先说结论： 二者的最大区别就是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-Router中的HashRouter和BrowserRouter
weixin_49179577的博客
02-24 2128
什么是react-router 前端路由实现方式 路由需要实现三个功能： 当浏览器地址变化时，切换页面； 点击浏览器后退，前进按钮，网页内容发生变化； 刷新浏览器，页面加载内容对应当前路由对应的地址； 在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。 hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。 history 模式：利用H5 history API实现url地址改
RouterRouter中的HashRouter和BrowserRouter之间的区别
逍遥-小子的博客
04-12 1855
1.HashRouter：页面跳转原理是使用了location.hash、location.replace,并且路径中是包含/# 2.BrowerRouter：页面跳转原理是使用了pushState、replaceState,路径不包含#直接定位到/目录下 区别： A.从页面的地址栏中可以看出HashRouter是包含#号的，而BrowerRouter是不包含#号的 B.BrowerRou...
react-router HashRouter和BrowserRouter的使用
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
react.js的两种路由方式：HashRouter
热门推荐
08-08 3万+
react.js路由-初步前面我们已经了解了react.js其中一种路由方式。这种方式是利用 html5的`window.history`，对浏览器历史记录的读取。 `history.back()` 和在浏览器点击后退按钮相同； `history.forward()`和在浏览器中点击前进按钮相同。另外h5时段开始支持`pushState()`和`replaceState()`方法，并且当回退/前进是
React-router 中的BrowserRouter 和 HashRouter
aaa333qwe的博客
03-14 5070
前两节的DEMO，都是 HashRouter，而非 BrowserRouter ，二者有所不同。以下解释的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 号后面的 url。假如有一个 Link 标签，点击后跳转到 /abc/def。BrowserRouter： http://localhost:8080/abc/defHashRouter： http://localhost:8080...
hash路由VSbrowser路由
wang_gongzi的博客
06-10 885
hash路由 长什么样？：http://[domain]/#/xxx/xxx 实现原理： hash值的变化会触发浏览器的window.onhashchange事件，浏览器不会去请求后端url 哈希路由就是路由上面有个#，以前是用来做锚点的，很多人可能会想知道这个hash路由和锚点到底有啥区别？ 锚点实际上是通过#后面的东西来跳到对应相同id的元素。 而哈希路由是监听这个哈希路由改变的事件，渲染相对应的页面元素。 那么问题来了，2者是同时起效还是有一个不起作用还是根本就冲突？ 查看has..
browserrouter和hashrouter
03-16
BrowserRouter和HashRouter都是React Router库中的路由器组件，用于实现前端路由。 BrowserRouter使用HTML5的history API来实现路由，可以实现无刷新页面跳转，但需要服务器端支持。而HashRouter使用URL的hash值来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值