首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Router 使用 Url 传参后改变页面参数不刷新的解决方法

问题 今天在写页面的时候发现一个问题,就是在 React Router 中使用了 Url 传参的功能,像这样: export class MainRouter extends React.Component... ); } } 按照官方文档的说法,可以在 ChannelPerPage 这个组件中使用 this.props.match.params...来获取 url 参数的值,但是我发现如果你在这个 url 下只将 url 中的参数部分改变,比如 channelId 从 1 变成 2 的时候,页面并不会重新渲染。...解决办法 查阅资料后发现这样的根本原因是 props 的改变并不会引起组件的重新渲染,只有 state 的变化才会引起组件的重新渲染,而 url 参数属于 props,故改变 url 参数并不会引起组件的重新渲染...的组件中有一个可复写的方法 componentWillReceiveProps(nextProps) { ... } 这个方法可以在 React 组件中被复写,这个方法将会在 props 改变的时候被调用,所以你可以使用这个方法将

4.2K30

理解 javascript:void(0) 语句

javascript:void(0) 的一个常见用例是超链接。当需要在链接中调用 JavaScript 时,单击该链接通常会导致浏览器加载新页面或刷新当前页面或丢失当前滚动位置。...但是,如果已将一些 JavaScript 附加到链接,您可能不希望出现此行为。 javascript: javascript:是一个伪URL。...例如,如果有一个链接需要在单击时执行特定的 JavaScript 功能,而不是导航到不同的页面,您可以使用javascript: javascript:myFunction()">Click...使用 javascript:void(0) 作为 href 值的目的是防止页面在点击链接时刷新和更改 URL。它通常在需要链接但不需要执行任何操作时使用。...URL,而 # 用作占位符 URL 以跳转到页面顶部或在同一页面内创建内部链接。

1.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    再谈location与history之跳转转态监控—router的两种实现模式

    刷新当前页面更新内容location更新URL地址,使用location对象可以通过很多方式来改变浏览器的位置,每次修改location的属性(hash除外),页面都会以新URL重新加载。 ...就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。...如果有 POST 数据提交,则会重新提交数据;如果想要刷新当前的页面,又避免 POST 数据提交,可以使用:window.location.replace( location.href );不刷新当前页面更新内容前端改变浏览器地址而不刷新页面...title:目前来看没啥用(未来可能会用到),一般为空或null,URL:即要更改页面的URL,且必须同源,不能跨域;类似location =URL(但仅是更新浏览器地址栏地址,不会加重URL)history.replaceState...pushState()JavaScript修改浏览器URL地址栏,不刷新页面(vue、react项目服务端渲染,可以保持访问地址一致)var stateObject = {};var title = "

    2.4K10

    跟我一起探索 HTTP- 重定向

    永久重定向将在更改站点的 URL 后,保留现有的链接/书签、上传文件时表示进度的页面等。 原理 在 HTTP 协议中,重定向操作由服务器向请求发送特殊的重定向响应而触发。...它表示原 URL 不应再被使用,而选用新的 URL 替换它。搜索引擎机器人、RSS 阅读器以及其他爬虫将更新资源原始的 URL。...使用用于非 GET 链接/操作重组网站。 [1] 该规范无意使方法发生改变,但在实际应用中用户代理会更改其方法。308 状态码被创建用来消除在使用非 GET 方法时行为的歧义。...JavaScript 的重定向机制总是作为最后诉诸的手段,并且只有在客户端开启了 JavaScript 的情况下才起作用。 如果可能,请采用 HTTP 协议的重定向机制,而不要使用 `` 元素重定向。...即便是你更新站点内部的链接来匹配新的 URL,也无法控制被外部资源使用的 URL。

    57950

    HTML5 简介(三):利用 History API 无刷新更改地址栏

    HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。...而每次浏览器显示的自然是最顶端的盘子的内容。 执行pushState函数之后,会往浏览器的历史记录中添加一条新记录,同时改变地址栏的地址内容。...假设一个页面左侧是若干导航链接,右侧是内容,同时导航时只有右侧的内容需要更新,那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。...最后,整个过程是不会改变页面标题的,可以通过直接对document.title赋值来更改页面标题。 其他说明 URL 的限制 为了安全考虑,新 URL 必须和当前 URL 在同一个域名下。...但是,URL 允许使用 query string 的形式。例如: window.history.pushState(null, null, "?id=1"); 在某些情况下可能比较方便。

    2.3K10

    HTTP 缓存最佳实践和 max-age 带来的陷阱

    在这个模式下,您永远不会更改特定 URL 的内容,而是更改 URL: 不缓存",而是指在使用缓存资源前必须与服务器进行检验(或称为 "重新验证")。...刷新有时可以解决 如果页面是作为刷新的一部分加载的,浏览器总是会与服务器重新验证,而忽略 max-age。因此,如果用户遇到的问题是由于 max-age 导致的,点击刷新就能解决一切问题。...这有点像在 JavaScript 中重新实现模式一(不可变内容),但只是为了 Service Worker 用户的利益,而不是所有浏览器和 CDN 的利益。...如果我想避免这种情况,我会更新第一篇文章,使用 Cloudflare 的用户界面刷新 Cloudflare 的缓存副本,等待三分钟,然后在另一篇文章中添加链接。

    35620

    Apriso 开发葵花宝典之六 Client Mode 篇

    在客户端模式下,Apriso屏幕可以轻松运行,而无需在初始页面加载后进行太多刷新,因为每个屏幕操作只会在屏幕中更新已更改的数据,而不是重新加载整个页面。...所以在客户端模式下,如果必须执行刷新操作,则必须将Portal操作类型从转到屏幕更改为刷新。...然而,在客户端模式下,最好使用Change Views(如果适用)而不是Go to Screen。 例如: 服务器和客户端模式下的配置示例: 一个屏幕有两个链接的视图:View1和View2。...而在客户端模式下,更改视图Change View只会更改所选视图,而不会更改其他视图,因此可以实现快速的应用程序性能。但Go to Screen功能将重新加载所有视图。...为了接收URL而不是路径,View Operation需要配置如下: ▶第一步:添加一个文件选择器控件 添加一个文件选择器控件,并将其与HTMLLayout Editor布局编辑器中的其他控件绑定,例如

    51870

    OAuth 详解 什么是 OAuth 2.0 隐式授权类型?

    隐式授权类型是单页 JavaScript 应用程序无需中间代码交换步骤即可获取访问令牌的一种方式。它最初是为 JavaScript 应用程序(无法安全存储机密)而创建的,但仅在特定情况下才推荐使用。...因为没有反向通道,隐式流也不返回刷新令牌。...隐式流使用 URL 片段的历史原因之一是浏览器可以在不触发页面重新加载的情况下操纵 URL 的片段部分。...如果您正在构建自己的授权服务器,这是一个相对容易进行的更改,但如果您使用的是现有服务器,那么您可能无法使用隐式授权来绕过 CORS 限制。...否则,用户可能会更改令牌中的数据并可能冒充 JavaScript 应用程序中的其他用户。

    37950

    js刷新当前页面方法

    true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后...语法: location.replace(URL) 在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。...//前一个页面的URL 不要用 history.go(-1),或 history.back();来返回并刷新页面,这两种方法不会刷新页面。...javascript"> window.opener.document.location.reload() 链接: link....本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    12K20

    使用OAuth 2.0访问谷歌的API

    该页面提供的OAuth 2.0用户授权方案的概述,谷歌的支持,并提供链接到更详细的内容。有关使用OAuth 2.0认证的详细信息,请参阅ID连接。...例如,一个JavaScript应用程序可能会请求令牌使用的浏览器重定向到谷歌的访问,而一个应用程序,没有浏览器使用Web服务请求的设备上安装。 一些请求需要在用户与他们的谷歌帐户登录的验证步骤。...如果用户授予许可,谷歌授权服务器发送您的应用程序的访问令牌(或授权代码,你的应用程序可以使用,以获得访问令牌)。如果用户不授予权限,服务器返回一个错误。...客户端(JavaScript)的应用 该谷歌的OAuth 2.0端点支持,在浏览器中运行的JavaScript应用程序。...用户更改密码,并刷新令牌包含Gmail的作用域。 用户帐户已超过批准(现场)刷新令牌的最大数量。 目前的每个客户每个用户帐户50个刷新令牌限制。

    4.5K10

    如何制作自己的原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...侦听 “popstate ”事件以响应.pathname 的更改。每当在浏览器的地址栏中输入新的 URL,但我们不想刷新页面时,就会发生这种情况,我们只是想通过加载新内容来刷新视图。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在,每次我们单击按钮时,URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...到目前为止,我们仅从前端更改了路由器地址。假定每次你导航到出现在路由按钮上的 URL 时,实际上都会从服务器单独加载该 URL。...原文链接 https://www.freecodecamp.org/news/making-vanilla-js-router-in-javascript/

    3.9K20

    ASP.Net开发基础温故知新学习笔记

    ①浏览器发出访问请求→②服务器处理访问请求并返回HTML→③浏览器解析HTML并显示页面   (3)GET与POST的区别:(★★★→重点)     ①GET通过URL传值,而POST通过HTTP报文;...=异步的JavaScript和XML,一种进行页面局部刷新的技术;      ②AJAX通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,从而改善用户体验效果;   (3)AJAX基本流程...①浏览器HTML中使用JavaScript创建XMLHttpRequest → ②服务器端获取请求进行处理并返回符合AJAX风格的数据(例如Json) → ③浏览器JavaScript解析服务器返回的数据并局部显示或更改信息...  (4)AJAX核心对象:JavaScript对象XMLHttpRequest XmlHttpRequest使我们可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。...作者:周旭龙 出处:http://www.cnblogs.com/edisonchou/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

    2.3K10

    UEditor用法

    看到此链接http://ueditor.baidu.com/ 一、下载 http://ueditor.baidu.com/download.html 二、部署 眼下最新版本号为1.1.7.3 下载下来的文件名称为...一个美丽的编辑器就出现了,但表情和上传文件这块还须要更改一下配置 三、改动配置,添加上传 打开editor_config.js文件,改动URL的值 var URL= "ueditor/"; 保存,刷新一下页面...改为使用up.jsp进行上传,这里面用的是apache的fileupload组件,所以要导入apache commons组件中的fileupload和io这两个jar包 url:'../.....filePath = "uploadfiles"; String realPath = "D:\\apache-tomcat-6.0.26\\webapps\\test\\"+filePath; 所以一切OK该,刷新测试...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/117783.html原文链接:https://javaforall.cn

    52610

    InstantClick,让你的网站快到起飞,PJAX技术

    技术来更改页面内容,这意味着: 你不能依赖DOMContentLoaded和jQuery.ready()这两个函数来触发相关事件(这两个事件在刷新整个页面的时候才会触发,但是你可以使用[InstantClick...哪些需要进入黑名单 哪些需要进入黑名单,而不能进入白名单的: 链接指向操作,例如注销和切换语言。...链接指向需要一段时间加载的非HTML内容 链接指向的页面与当前页面标签内的css样式和脚本不同 链接触发JavaScript的操作 部分链接已在内部列入黑名单,且无法列入白名单: 链接有target...它的回调可以接受一个可选的isInitialLoad参数,它是一个布尔值,当它是初始页面更改或当InstantClick不被支持时为true,而当InstantClick更改页面时为false。...你可以使用receive事件。 这个事件有三个参数:url, ,body 和title。 url 接收的页面的地址,它包括哈希值。它是只读的。 body是body对象,title是标题文本。

    3.7K20

    JSBridge 技术原理分析

    方式2:拦截 URL SCHEME URL SCHEME是一种类似于url的链接,是为了方便app直接互相调用设计的,形式和普通的 url 近似,主要区别是 protocol 和 host 一般是自定义的...在实践过程中,这种方式有一定的缺陷: 使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。 创建请求,需要一定的耗时,比注入 API 的方式调用同样的功能,耗时会较长。...loadUrl 方法使用起来方便简洁,但是效率低无法获得返回结果且调用的时候会刷新 WebView 。 在 4.4 以后,可以使用 evaluateJavascript 方法实现。...该方法效率高获取返回值方便,调用时候不刷新 WebView,但是只支持 Android 4.4+。...方式2:由 JavaScript 端引用 与由 Native 端注入正好相反,它的优点在于:JavaScript 端可以确定 JSBridge 的存在,直接调用即可; 缺点是:如果桥的实现方式有更改,JSBridge

    1.8K10

    Html标签href的困惑记载

    超链接的 URL。...即可得出当使用(href=”#”)之时即有可能会回到页面顶部。但问题是,活动一屏幕足以显示完,无需滑动,Ios手机也是如此。那么使用(href=”#”)在这里是不会影响页面刷新的。...而href=”#”代表的是本地页面[页面跳转到页面本身]。如此就能解释了之前出现问题了:ios可以监听到点击这种链接,从而使得页面被刷新。...最后,也更进一步的疑问:JavaScript中语句最后的分号是可以缺省的,那为何要使用javascript:;而不是javascript:呢?是习惯还是规范,我也很疑惑!我也很疑惑!我也很疑惑!...总结:#包含了一个位置信息默认的锚是#top 也就是网页的上端; 而javascript:void(0)仅仅表示一个死链接,没有任何信息。

    3.4K50

    Speed丨如何快速给网站添加Pjax?

    Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。...设置后的这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。Pjax是可以增加访客打分的好功能。...引用格式: javascript" src="//lib.sinaapp.com/js/jquery/1.9.0/jquery.js"> ②编辑Footer...绑定本页面非新窗口打开的所有本域链接,链接点击后,替换contentleft容器内容为新内容contentleft,ajax超时时间8秒     $(document).pjax('a...="text/javascript" src="//24bp.cn/mine/pjax.js"> $

    1.9K40

    RESTful API 设计最佳实践

    对比: person.year_of_birth // 不推荐,违反JavaScript代码通用规范 person.YearOfBirth // 不推荐,JavaScript构造方法命名 person.yearOfBirth...将版本号放在URL中以是必需的。如果您有不兼容和破坏性的更改,版本号将让你能更容易的发布API。发布新API时,只需在增加版本号中的数字。...因此,您应该在URL中使用动词而不是名词,来清楚的区分资源请求和非资源请求。 考虑特定资源搜索和跨资源搜索 提供对特定资源的搜索很容易。...前文提到,对于非资源请求URL,使用动词而不是名词。因此,您的搜索网址可能如下所示: GET /search?...在响应参数中添加浏览其它API的链接 理想情况下,不会让客户端自己构造使用REST API的URL。让我们思考一个例子。 客户端想要访问员工的薪酬表。

    1.4K10
    领券