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

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

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

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

《前端实战总结》如何在刷新页面的情况下改变URL

page=2'; 这段代码虽然可以改变浏览器url,如下图所示: 但会出现一个性能问题,就是当我们执行了以上代码后,整个浏览器都会刷新,导致我们不想刷新的部分也刷新了,那我们有办法可以让它局部刷新吗?...history API Window.history是一个只读属性,用来获取History 对象的引用,History 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面...使用 history.pushState() 可以改变referrer,它在用户发送 XMLHttpRequest 请求时在HTTP头部使用,改变state后创建的 XMLHttpRequest 对象的...referrer都会被改变。...${stringify(queryObj)}` history.pushState({url: url}, '', url) } 这样我们就可以在请求的同时,调用setBrowserUrl方法来改变浏览器

1.7K20

常见问题之JS——Url地址转码与解码

常见问题之JS——Url地址转码与解码 背景 日常我们开发时,我们会遇到各种各样的奇奇怪怪的问题(踩坑o(╯□╰)o),这个常见问题系列就是我日常遇到的一些问题的记录文章系列,这里整理汇总后分享给大家,...1、encodeURI和decodeURI let url = 'http://127.0.0.1:8080/login?uri=http://127.0.0.1:8080/userInfo?...id=test001&name=无名'; console.log(url); console.log(encodeURI(url)); 看其打印的情况,我们会发现经过encodeURI处理后的地址发生了转码...同样的,前端接受到这类转码后的地址,我们可以使用decodeURI进行解码回来。 当然,encodeURI也是有局限的,它有一些常见的字符还是无法做到有效转码。...: @ & = + $ , #等这类特殊字符进行转码,这样就可以满足于我们上面的测试代码的使用了,同样的遇到该类的转码后的地址,我们可以使用decodeURIComponent将其解码回来。

2.9K20

JS可不可以实现:改变地址地址而不跳转

比如:我点击页面上的一个按钮,网址栏中的地址发生改变,但是页面不跳转也刷新,但是我手动刷新此页面的时候,实际要刷新地址栏中的新地址  其实HTML5早就帮我们解决了 用history.pushState...但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。...如浏览器地址为http://localhost:8080/tts6/user/teachertts6?...pMUploadHomework=success 改变为http://localhost:8080/tts6/user/teachertts6   不用请求后台,直接改变url地址,怎么办了?...[0]};     history.pushState(state,'','teachertts6'); //现在浏览器的地址变为http://localhost:8080/tts6/user/teachertts6

6.8K10

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

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

2.2K10

从后端到前端之Vue(五)小试路由

HTML5 History API提供了一种功能,能让开发人员在刷新整个页面的情况下修改站点的URL。...我们可以用 history.pushState(null, null, ‘about’); 来改变url地址,这种方式只是单纯的修改地址里的url,而不会向服务器提交,这样页面就不会被刷新,我们才有机会执行...然后呢,页面当然是不会有啥变化的,因为vue是数据驱动,我们的数据改变了吗?并没有,我们只是改变了一下url。...按F5会刷新页面,如果这时候url地址栏是 “/about” ,那么就会向服务器提交这个网址,很显然会出现服务器的404页面。因为服务器网站里面并没有这个地址。那么怎么办呢?...这种方式还支持直接在浏览器的地址栏里面输入 http://127.0.0.1:8000/about 也是可以正常运行的。只需要注意一下vue.js的引用地址确保能够正确加载js文件即可。

85820

SPA应用路由器如何工作?

通过路由器,可以在reload页面的情况下,实现页面部分刷新。那么,最关键的地方,就是如何设计路由器,如何让路由器工作?...当改变锚点时,页面的主体部分会切换内容,但是,整个页面不会被重新刷新。 那么,如何监听锚点变化?...); 整体页面,并没有刷新,没有激活window.onload事件; 如此可见,利用HTML5 history API,可以实现“切换URL地址但页面不会被刷新”的功能。...它的优点是,路由器在多个URL间跳转,可以完全支持浏览器SEO(切换Hash不能改变真正的URL,多次路由切换后,搜索引擎爬虫会认为一直访问同一个页面,无法SEO)。...缺点是,切换路由后的http://www.somesite.com/subPage1.html 并不是一个真正的资源地址,想象一下,这个时候点击浏览器刷新按钮,浏览器必然会发起对subPage1.html

1.5K40

Vue-Router

路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 二 .路由器提供了两种机制: 路由和转送. 路由是决定数据包从来源到目的地的路径....,在IE9中具有自动备用 可自定义的滚动行为 Vue-router构建单应用界面的核心 改变URL,但是页面不进行整体的刷新。...方法一:URL的hash URL的hash也就是锚点(#), 本质上是改变window.kk属性....我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 方法二:history接口 history接口是HTML5新增的, 它有五种模式改变URL刷新页面....我们前面说过改变路径的方式有两种: URL的hash(浏览器URL中带#不好看) HTML5的history 默认情况下, 路径的改变使用的URL的hash.

2.3K10
领券