BrowserRouter 与 HashRouter的区别

于 2022-07-18 15:38:03 发布
阅读量285 收藏
点赞数
文章标签： 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YaNglIN123i/article/details/125851575
版权

1.底层原理不同

      BrowserRouter使用的是h5的history API ，不兼容IE9及以下版本。

      HashRouter使用的是URl哈希值

2.url表现形式不同

        BrowserRouter的路径中没有#，

        HashRouter的路径中存在#

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

        BrowserRouter没有任何影响，因为state保存在history对象中。

        HashRouter刷新后会导致路由state参数丢失

YaNglIN123i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HashRouter与 BrowserRouter的区别
m0_45382009的博客
03-13 7552
1.原理上 HashRouter： 在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter） BrowserRouter： 使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。 2.用法上 BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信 HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。 3.生产实践上 H
BrowserRouter与HashRouter的区别
weixin_59489521的博客
03-16 2673
1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRouter的路径包含#,例如：localhost:3000/#/demo/test 3.刷新后对路由s...
BrowserRouter和HashRouter的区别
qq_44850230的博客
06-27 261
1. 底层原理不一样 2. url表现形式不一样 3. 刷新后对路由state参数的影响 4. 备注
react中BrowserRouter和HashRouter的两种路由模式区别
qq_63099565的博客
06-03 2109
一、react中有两种路由模式：1.BrowserRouter 浏览器历史记录路由: 使用H5的history API2.HashRouter 哈希路由: 使用url的hash值二、BrowserRouter和HashRouter的不同点1.兼容性不同2.表现形式不同3.刷新对路由state参数的影响...
react router中HashRouter和BrowserRouter的区别和使用场景
程序员良仔
05-08 8241
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
浅谈react-router HashRouter和BrowserRouter的使用
08-28
本篇文章主要介绍了浅谈react-router HashRouter和BrowserRouter的使用，具有一定的参考价值，有兴趣的可以了解一下
详解react-router 4.0 下服务器如何配合BrowserRouter
11-27
react-router作为react框架路由解决...<BrowserRouter>, <HashRouter>, , 其中组件在内存中保存“URL”信息，不会修改浏览器的地址栏，往往用于React Native或测试环境等非浏览器环境。 而组件从名字能看出它从不修
Laravel-React:入门包结合了React和Laravel路线
05-11
LaravelReact入门包结合了React和Laravel路线
ipfs-react-router：为IPFS部署的网站提供更好的React Router路由
02-02
中BrowserRouter或HashRouter的替代方法，它BrowserRouter通过为网站提供服务的方式来设置基本名称（网站根网址路径）。 使用IpfsRouter的站点可以通过以下所有IpfsRouter提供有效的路由： 开箱即用的...
BrowseRouter与HashRouter的区别
believet93的博客
03-26 361
1.底层原理不一样： BrowseRouter使用的时H5的history API，不兼容IE9及以下版本。 HashRouter使用的时URL的哈希值。 2.url表现形式不一样 BrowseRouter的路径中没有#，例如：localhost:3000/demo HashRouter的路径中包含#，如localhost:3000/#/demo 3.刷新后对路由state参数的影响 BrowseRouter没有任何影响，因为state保存在history对象中 HashRouter刷新后会导致路由st
react-router v4中 HashRouter 和 BrowserRouter的使用
dingdabao8888的博客
05-10 1298
遇到的问题 项目中控制路由跳转使用的是BrowserRouter，代码如下： ReactDOM.render(( <BrowserRouter> <div className="container"> <Route path={routePaths.INDEX} exact component={...
react-router下browserRouter与hashRouter的区别
u010007013的博客
03-23 1222
先说结论： 二者的最大区别就是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的使用
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
React-router 中的BrowserRouter 和 HashRouter
aaa333qwe的博客
03-14 5069
前两节的DEMO，都是 HashRouter，而非 BrowserRouter ，二者有所不同。以下解释的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 号后面的 url。假如有一个 Link 标签，点击后跳转到 /abc/def。BrowserRouter： http://localhost:8080/abc/defHashRouter： http://localhost:8080...
react.js的两种路由方式：HashRouter
热门推荐
08-08 3万+
react.js路由-初步前面我们已经了解了react.js其中一种路由方式。这种方式是利用 html5的`window.history`，对浏览器历史记录的读取。 `history.back()` 和在浏览器点击后退按钮相同； `history.forward()`和在浏览器中点击前进按钮相同。另外h5时段开始支持`pushState()`和`replaceState()`方法，并且当回退/前进是
vue-router的两种模式的区别
weixin_30721899的博客
09-07 1288
作者：imgss 出处：http://www.cnblogs.com/imgss 欢迎转载，也请保留这段声明。谢谢! 众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event)...
react（48）——BrowserRouter与HashRouter的区别
木子 旭的博客
03-21 147
1.底层原理实现不一样： BrowserRouter使用的是H5的history API，不兼容IE9一下的版本。 HashRouter使用的URL的哈希值。 2.path的表现形式不一样 BrowserRouter的路径中没有# HashRouter的路径中包含/# 3.刷新后对路由state参数的影响 对BrowserRouter没有任何影响，因为state保存在history对象之中。 HashRouter刷新后会导致路由state参数的丢失！！！ 4.备注 HashRouter可以用于
BrowserRouter 与 HashRouter 区别
最新发布
03-14
BrowserRouter 和 HashRouter 都是 React Router 中的路由组件，它们的主要区别在于 URL 的格式不同。BrowserRouter 使用 HTML5 的 history API，URL 中不包含 #，而 HashRouter 使用 URL 中的 hash（#）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值