search
HomeWeb Front-endJS TutorialChanging parameters in Url without refreshing in React-Router

This time I will bring you how to change the parameters of the Url in React-Router without refreshing. What are the things to pay attention to when changing the parameters of the Url in React-Router without refreshing? The following is a practical case. Let’s take a look. take a look.

ProblemI found a problem when writing the page today, that is, using the Url parameter passing function in React Router, like this :

export class MainRouter extends React.Component {
  render() {
    return (
      <browserrouter>
        <switch>
          ...
          <route></route>
          ...
        </switch>
      </browserrouter>
    );
  }
}

According to the official documentation, you can use

this.props.match.params

in the ChannelPerPage component to get the value of the url parameter, but I found that if you only change the parameters in the url under this url For some changes, such as when the channelId changes from 1 to 2, the page will not be refreshed.

SolutionAfter consulting the information, I found that the root cause is that the change of props does not cause the component to be re-rendered, only the state Only changes will cause the component to be re-rendered, and the url parameters belong to props, so changing the url parameters will not cause the component to be re-rendered.

Later I discovered that there is a overridable method in the React component

componentWillReceiveProps(nextProps) {
 ...
}

This method can be overridden in the React component. This method will be called when the props change, so you can Use this method to obtain nextProps, and modify the state content in this method so that the component can be re-rendered.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue2.0 Detailed explanation of the steps to implement real-time retrieval and update of the input box


JS to implement a simple shopping cart function Code analysis

The above is the detailed content of Changing parameters in Url without refreshing in React-Router. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools