【React】BrowserRouter 与 HashRouter 的不同

最新推荐文章于 2024-08-17 21:04:51 发布
最新推荐文章于 2024-08-17 21:04:51 发布
阅读量101 收藏
点赞数
分类专栏： 前端 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hazelnut_x/article/details/119088461
版权
  • 底层原理
    • BrowserRouter 使用的是 H5 的 history API ，不兼容 IE9及以下版本
    • HashRouter 使用的是 URL 的哈希值
  • path 表现形式
    • BrowserRouter 路径中没有 #，如 localhost/test
    • HashRouter 路径中有 #，如 localhost/#/test 。 # 后的部分会在前端处理，不会传递给服务器
  • 刷新后对路由 state 参数的影响
    • BrowserRouter 没有任何影响，因为 state 会保存在 history 对象中
    • HashRouter 刷新后会导致路由 state 参数丢失
hazelnut_x
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
随时记|React-Router中的HashRouter和BrowserRouter
weixin_49179577的博客
02-24 2158
什么是react-router 前端路由实现方式 路由需要实现三个功能： 当浏览器地址变化时，切换页面； 点击浏览器后退，前进按钮，网页内容发生变化； 刷新浏览器，页面加载内容对应当前路由对应的地址； 在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。 hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。 history 模式：利用H5 history API实现url地址改
react-router v4中 HashRouter 和 BrowserRouter的使用
dingdabao8888的博客
05-10 1307
遇到的问题 项目中控制路由跳转使用的是BrowserRouter，代码如下： ReactDOM.render(( <BrowserRouter> <div className="container"> <Route path={routePaths.INDEX} exact component={...
react相关问题
Mia的博客
08-13 740
严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。 this.setState({isHot:!isHot})
【react】react中BrowserRouter和HashRouter的区别：
SunPeng的博客
08-06 1116
【react】react中BrowserRouter和HashRouter的区别：
BrowserRouter与HashRouter的区别
weixin_38222276的博客
04-16 291
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
React Router 4.0 服务器配合 BrowserRouter 实践总结 在 React 框架中，路由解决方案React Router 4.0 中，BrowserRouter 是一个常用的路由组件，用于实现前端路由的功能。BrowserRouter 和 HashRouter 都可以实现...
Laravel-React:入门包结合了React和Laravel路线
05-11
- **创建React组件**：开发React组件，包括路由组件，如`App.js`，其中包含`BrowserRouter`或`HashRouter`以及各个子`Route`组件。 - **配置Laravel路由**：在`routes/web.php`中设置一个简单的路由，返回`app.blade...
JAVA-WEB资源配置
caryeko的专栏
08-15 199
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 418
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 786
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 302
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
提升前端性能的JavaScript技巧
han2434的博客
08-14 802
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 324
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 956
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
vue-lic（三）
qq_64669006的博客
08-14 274
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
vue3 组合式 API：setup()
最新发布
咸鱼滚滚
08-17 832
setup()props和contextprops：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrsslotsemit等。可以通过解构赋值的方式获取特定的上下文信息。示例：< script setup lang = " ts " > // defineProps 用于定义组件接收的父组件传递过来的属性（props）。// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。import {
微信小程序电话号码授权
qq_36022463的博客
08-16 329
文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html。文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html。掉这个获取电话号码，需要先获取access_token。获取token，有效期是两小时，需要缓存，
尚品汇-前端面包屑平台属性、排序处理（三十三）
dengfengling999的博客
08-17 379
早期单一服务器，用户认证。缺点：单点性能压力，无法扩展分布式，SSO(single sign on)模式解决 ：用户身份信息独立管理，更好的分布式管理。可以自己扩展安全策略跨域不是问题缺点：认证服务器访问压力较大。业务流程图{用户访问业务时，必须登录的流程}{单点登录的过程}
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、付费专栏及课程。

余额充值