搜索
首页web前端js教程React-Router中Url不刷新的情况下改变参数

这次给大家带来React-Router中Url不刷新的情况下改变参数,React-Router中Url不刷新改变参数的注意事项有哪些,下面就是实战案例,一起来看一下。

问题

今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样:

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

按照官方文档的说法,可以在ChannelPerPage这个组件中使用

this.props.match.params

来获取url参数的值,但是我发现如果你在这个url下只将url中的参数部分改变,比如channelId从1变成2的时候,页面并不会刷新。

解决办法

查阅资料后发现这样的根本原因是props的改变并不会引起组件的重新渲染,只有state的变化才会引起组件的重新渲染,而url参数属于props,故改变url参数并不会引起组件的重新渲染。

后来发现React的组件中有一个可复写的方法

componentWillReceiveProps(nextProps) {
 ...
}

这个方法可以在React组件中被复写,这个方法将会在props改变的时候被调用,所以你可以使用这个方法将nextProps获取到,并且在这个方法里面修改state的内容,这样就可以让组件重新被渲染。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue2.0实现输入框实时检索更新步骤详解

JS实现简单购物车功能代码分析

以上是React-Router中Url不刷新的情况下改变参数的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP 5.4版本新功能:如何使用callable类型提示参数接受可调用的函数或方法PHP 5.4版本新功能:如何使用callable类型提示参数接受可调用的函数或方法Jul 29, 2023 pm 09:19 PM

PHP5.4版本新功能:如何使用callable类型提示参数接受可调用的函数或方法引言:PHP5.4版本引入了一项非常便利的新功能-可以使用callable类型提示参数来接受可调用的函数或方法。这个新功能使得函数和方法可以直接指定相应的可调用参数,而无需进行额外的检查和转换。在本文中,我们将介绍callable类型提示的使用方法,并提供一些代码示例,

产品参数是什么意思产品参数是什么意思Jul 05, 2023 am 11:13 AM

产品参数是指产品属性的意思。比如服装参数有品牌、材质、型号、大小、风格、面料、适应人群和颜色等;食品参数有品牌、重量、材质、卫生许可证号、适应人群和颜色等;家电参数有品牌、尺寸、颜色、产地、适应电压、信号、接口和功率等。

C++程序以给定值为参数,找到双曲正弦反函数的值C++程序以给定值为参数,找到双曲正弦反函数的值Sep 17, 2023 am 10:49 AM

双曲函数是使用双曲线而不是圆定义的,与普通三角函数相当。它从提供的弧度角返回双曲正弦函数中的比率参数。但要做相反的事,或者换句话说。如果我们想根据双曲正弦值计算角度,我们需要像双曲反正弦运算一样的反双曲三角运算。本课程将演示如何使用C++中的双曲反正弦(asinh)函数,使用双曲正弦值(以弧度为单位)计算角度。双曲反正弦运算遵循以下公式-$$\mathrm{sinh^{-1}x\:=\:In(x\:+\:\sqrt{x^2\:+\:1})},其中\:In\:是\:自然对数\:(log_e\:k)

PHP Warning: in_array() expects parameter的解决方法PHP Warning: in_array() expects parameter的解决方法Jun 22, 2023 pm 11:52 PM

在开发过程中,我们可能会遇到这样一个错误提示:PHPWarning:in_array()expectsparameter。这个错误提示会在使用in_array()函数时出现,有可能是因为函数的参数传递不正确所导致的。以下我们来看看这个错误提示的解决方法。首先,需要明确in_array()函数的作用:检查一个值是否在数组中存在。该函数的原型为:in_a

机器学习超参数调优总结(PySpark ML)机器学习超参数调优总结(PySpark ML)Apr 08, 2023 pm 07:21 PM

ML中的一个重要任务是模型选择,或者使用数据为给定任务找到最佳的模型或参数。这也称为调优。可以对单个的估计器(如LogisticRegression​)进行调优,也可以对包括多种算法、特性化和其他步骤的整个pipeline​进行调优。用户可以一次调优整个Pipeline​,而不是分别调优 Pipeline 中的每个元素。ML中的一个重要任务是模型选择,或者使用数据为给定任务找到最佳的模型或参数。这也称为调优。可以对单个的Estimator​(如LogisticRegression​)进行调优,也

100亿参数的语言模型跑不动?MIT华人博士提出SmoothQuant量化,内存需求直降一半,速度提升1.56倍!100亿参数的语言模型跑不动?MIT华人博士提出SmoothQuant量化,内存需求直降一半,速度提升1.56倍!Apr 13, 2023 am 09:31 AM

大型语言模型(LLM)虽然性能强劲,但动辄几百上千亿的参数量,对计算设备还是内存的需求量之大,都不是一般公司能承受得住的。量化(Quantization)是常见的压缩操作,通过降低模型权重的精度(如32bit降为8bit),牺牲一部分模型的性能来换取更快的推理速度,更少的内存需求。但对于超过1000亿参数量的LLM来说,现有的压缩方法都无法保持模型的准确率,也无法在硬件上高效地运行。最近,麻省理工学院和英伟达的研究人员联合提出了一个通用后训练的量化(GPQ, general-purpose po

必填参数缺失什么意思必填参数缺失什么意思Sep 19, 2023 pm 03:08 PM

必填参数缺失是指在进行某项操作或者调用某个函数时,必要的参数没有被提供或者没有被正确地传递。在编程中,函数通常会需要一些输入参数来完成特定的任务,必须在调用函数时被提供,如果这些必填参数没有被提供,系统就无法理解如何执行函数,因此会报错或者无法继续执行。必填参数缺失在编程中是一个常见的错误,解决这个问题的方法是检查调用函数的代码,确保所有必填参数都被正确地提供等等。

vlookup函数的参数及其意义解释vlookup函数的参数及其意义解释Jan 09, 2024 pm 03:18 PM

我们在使用excel的时候一定有用过vlookup函数吧。那么对于这种函总共有几个,每个函数具体是怎么使用的,据小编所知vlookup函数一共有四个,分别是Lookup_value、Table_array、col_index_num、Range_lookup。那么他们的具体用法就让小编来告诉大家吧~vlookup函数有几个参数每个参数的含义vlookup函数的参数有Lookup_value、Table_array、col_index_num、Range_lookup,一共有4个。1、Lookup

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境