window.location.href 与 History.pushState - 使用哪个?

2024-01-07

我一直在自学react-router,现在我想知道应该使用哪种方法来转到另一个页面。

根据这篇文章(使用反应路由器以编程方式导航) https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router,您可以通过以下方式转到另一个页面this.props.history.push('/some/path').

但老实说,我不太确定它们之间的区别window.location.href and history.pushState.

据我所理解,window.location.href = "/blah/blah";通过发起新的 HTTP 调用(刷新浏览器)将您引导至另一个页面。

另一方面,什么history.pushState (and this.props.history.push('/some/path')) 的作用是推动一个状态。显然,这会更改 HTTP 引荐来源网址并因此更新XMLHttpRequest.

这是摘录自mozila 的文档... https://developer.mozilla.org/en-US/docs/Web/API/History_API

使用history.pushState() 可以更改在更改状态后创建的XMLHttpRequest 对象的HTTP 标头中使用的引荐来源网址。

对我来说,听起来这两种方法都进行了新的 HTTP 调用。如果是这样,有什么区别?

任何建议将被认真考虑。

PS

我认为开发人员在决定如何转到另一个页面之前需要考虑是否有必要从服务器获取数据。

如果您需要从服务器检索数据,window.location.href会 没问题,因为您将进行新的 HTTP 调用。但是,如果您正在使用<HashRouter>,或者您想为了速度而避免刷新页面,什么是一个好的方法?

这个问题促使我发表这篇文章。


history.pushstate does not进行一个新的 HTTP 调用(来自您引用的 mozilla 文档):

请注意,浏览器在调用pushState()后不会尝试加载此URL,但它可能会在稍后尝试加载该URL,例如在用户重新启动浏览器后。

window.location.href = "url"将浏览器导航到新位置,因此does发出一个新的 http 请求。注意:当您指定新的 url 作为哈希片段时会出现例外情况。然后窗口就滚动到相应的锚点


您可以从打开“网络”选项卡的 devTools 控制台检查两者是否正在运行。请务必启用“保留日志”选项。网络选项卡列出了所有新的 http 请求。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

window.location.href 与 History.pushState - 使用哪个? 的相关文章

  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init
  • Android 设备上的 PhoneGap 蓝牙插件

    我一直在尝试让 PhoneGap 工作的蓝牙插件 但我似乎不知道哪里出了问题 首先 我的测试设备是 Galaxy S3 GT 19305T 应用程序是使用PhoneGap CLI http docs phonegap com en 3 0
  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c

随机推荐

  • cocoa应用程序中的资源文件夹路径

    我正在开发使用一些 c 文件的 Mac OS X 应用程序 并且我有一个配置文件 我将其添加到应用程序资源中 我的问题是 资源文件夹的相对路径是什么 I tried MyAppName app Contents Resources conf
  • MATLAB 与命名空间最接近的东西是什么?

    我的实验室里有很多 MATLAB 代码 问题是确实没有办法组织它 由于所有函数都必须位于同一个文件夹中才能调用 或者您必须将一堆文件夹添加到 MATLAB 的path环境变量 似乎我们注定会在同一个文件夹中拥有大量文件 并且全部位于全局命名
  • Java应用程序中的主要方法[重复]

    这个问题在这里已经有答案了 我们到处都读到要启动一个 java 程序 我们需要一个起点 那就是静态 main 方法 在 Java EE 应用程序中 main 方法位于何处 它是否内置在应用程序服务器 容器中 它是如何触发的以及我们可以对此进
  • 从 qrc 导入 qml 时 QtCreator 语法高亮

    当我从 qrc 位于不同的目录中 导入 qml 时 它可以编译并正常工作 但是当 Qt Creator 无法识别导入的组件并且不突出显示它时 这是代码 import QtQuick 2 0 import qrc qml libs Appli
  • 根据另一列更改一列的值

    这是同样的问题根据 pandas 中的另一个值更改一个值 https stackoverflow com questions 19226488 change one value based on another value in panda
  • 带有 sortKeys 和参数值的 Spring Batch Paging

    我有一个在 Spring Boot 中运行的 Spring Batch 项目 该项目工作得很好 对于我的读者 我将 JdbcPagingItemReader 与 MySql PagingQueryProvider 结合使用 Bean pub
  • youtube-dl 速率限制下载速度和自动恢复下载[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 shell 脚本进行视频转换 这是 shell 脚本 bin bash downloading video youtube d
  • Laravel Nova - 将 Nova 路径指向资源页面

    我需要将 Nova 路径指向资源 这样当用户登录时 他就会定向到该特定资源 我已更新此路径 config nova php path gt crm resources clients 现在登录后 我可以看到 URL 已更新 但页面仍然是We
  • 如何正确构建 KnockoutJS 应用程序

    我想知道如何以正确的方式构建 KnockoutJS 应用程序 官方文档几乎总是只使用一个 ViewModel 在仅实现了几个功能之后 我的代码变得非常混乱 并且来自面向对象的背景 我对这样的架构非常过敏 所以必须有更好的解决方案 由于对 J
  • 从 Java 调用 Mono 程序集

    我有一个用 C 编写的大型文本校对框架 我想编写一个使用这组库的 OpenOffice 扩展 我首选的语言是 Java 因此 我需要一种从 Java 访问 NET 程序集的方法 在 Windows 和Linux 有没有办法从 Java 调用
  • 程序化 MSIL 注入

    假设我有一个像这样的有缺陷的应用程序 using System namespace ConsoleApplication1 class Program static void Main string args Console WriteLi
  • RecyclerView 问题:EditText 失去焦点

    我已经放了一些EditText in RecyclerView因为我需要获得一些值 实现是这样的
  • 为什么没有换行符的情况下读取文件会更快?

    在Python 3 6中 如果存在换行符 则读取文件需要更长的时间 如果我有两个文件 一个带有换行符 另一个没有换行符 但它们具有相同的文本 那么带有换行符的文件将花费大约 100 200 的时间来读取 我已经提供了一个具体的例子 步骤 1
  • 如何让 Brew 使用 +clipboard 安装 Vim?

    我正在尝试弄清楚如何在使用 Vim 编辑的文件和 macOS 剪贴板之间进行复制和粘贴 大多数说明都说首先使用 Homebrew 安装 Vim 因为它将在启用剪贴板选项的情况下安装 vim version 将显示 clipboard 然而
  • Objective-C 调用编译器不认为存在的选择器(即使我们知道它存在)

    我在prepareForSegue方法中有这段代码 Get destination view UIViewController viewController segue destinationViewController See if it
  • TEXTMETRIC 结构和“Cambria Math”字体的问题

    如果我运行下面的代码 我会得到带有 cambria Math 字体的 tm 和 gm 结构的以下值 tm tmHeight 161 tm tmAscent 90 tm tmDescent 71 and gm gmBlackBoxY 14 中
  • 如何获得 Java 反射来查找可调用函数?

    我有一个界面ZipCodeServer哪个班级ZipCodeServerImpl实施 我也有一个界面ZipCodeList哪个班级ZipCodeListImpl实施 其中的功能之一是ZipCodeServer接口要求是 public voi
  • 有没有办法提高opencv视频处理速度? [复制]

    这个问题在这里已经有答案了 out cv2 VideoWriter output file codec fps width height while video isOpened has frame image video read if
  • 在 Java 中转置不同维度的二维数组

    嘿 我正在尝试转置一个二维数组 其行 列由用户输入 我浏览过这个网站 几乎所有我看到的建议都是针对方形数组 2x2 3x3 等 这就是我到目前为止所拥有的 import java util Scanner public class Arra
  • window.location.href 与 History.pushState - 使用哪个?

    我一直在自学react router 现在我想知道应该使用哪种方法来转到另一个页面 根据这篇文章 使用反应路由器以编程方式导航 https stackoverflow com questions 31079081 programmatica