Changing 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 exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </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 boxJS to implement a simple shopping cart function Code analysisThe 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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

New feature of PHP5.4 version: How to use callable type hint parameters to accept callable functions or methods Introduction: PHP5.4 version introduces a very convenient new feature - you can use callable type hint parameters to accept callable functions or methods . This new feature allows functions and methods to directly specify the corresponding callable parameters without additional checks and conversions. In this article, we will introduce the use of callable type hints and provide some code examples,

Product parameters refer to the meaning of product attributes. For example, clothing parameters include brand, material, model, size, style, fabric, applicable group, color, etc.; food parameters include brand, weight, material, health license number, applicable group, color, etc.; home appliance parameters include brand, size, color , place of origin, applicable voltage, signal, interface and power, etc.

C++ parameter type safety checking ensures that functions only accept values of expected types through compile-time checks, run-time checks, and static assertions, preventing unexpected behavior and program crashes: Compile-time type checking: The compiler checks type compatibility. Runtime type checking: Use dynamic_cast to check type compatibility, and throw an exception if there is no match. Static assertion: Assert type conditions at compile time.

During the development process, we may encounter such an error message: PHPWarning: in_array()expectsparameter. This error message will appear when using the in_array() function. It may be caused by incorrect parameter passing of the function. Let’s take a look at the solution to this error message. First, you need to clarify the role of the in_array() function: check whether a value exists in the array. The prototype of this function is: in_a

i9-12900H is a 14-core processor. The architecture and technology used are all new, and the threads are also very high. The overall work is excellent, and some parameters have been improved. It is particularly comprehensive and can bring users Excellent experience. i9-12900H parameter evaluation review: 1. i9-12900H is a 14-core processor, which adopts the q1 architecture and 24576kb process technology, and has been upgraded to 20 threads. 2. The maximum CPU frequency is 1.80! 5.00ghz, which mainly depends on the workload. 3. Compared with the price, it is very suitable. The price-performance ratio is very good, and it is very suitable for some partners who need normal use. i9-12900H parameter evaluation and performance running scores

Hyperbolic functions are defined using hyperbolas instead of circles and are equivalent to ordinary trigonometric functions. It returns the ratio parameter in the hyperbolic sine function from the supplied angle in radians. But do the opposite, or in other words. If we want to calculate an angle from a hyperbolic sine, we need an inverse hyperbolic trigonometric operation like the hyperbolic inverse sine operation. This course will demonstrate how to use the hyperbolic inverse sine (asinh) function in C++ to calculate angles using the hyperbolic sine value in radians. The hyperbolic arcsine operation follows the following formula -$$\mathrm{sinh^{-1}x\:=\:In(x\:+\:\sqrt{x^2\:+\:1})}, Where\:In\:is\:natural logarithm\:(log_e\:k)

Although large-scale language models (LLM) have strong performance, the number of parameters can easily reach hundreds of billions, and the demand for computing equipment and memory is so large that ordinary companies cannot afford it. Quantization is a common compression operation that sacrifices some model performance in exchange for faster inference speed and less memory requirements by reducing the accuracy of model weights (such as 32 bit to 8 bit). But for LLMs with more than 100 billion parameters, existing compression methods cannot maintain the accuracy of the model, nor can they run efficiently on hardware. Recently, researchers from MIT and NVIDIA jointly proposed a general-purpose post-training quantization (GPQ).

An open source model that can beat GPT-4 has appeared! The latest battle report of the large model arena: the 104 billion parameter open source model CommandR+ climbed to 6th place, tying with GPT-4-0314 and surpassing GPT-4-0613. Image This is also the first open-weight model to beat GPT-4 in the large model arena. The large model arena is one of the only test benchmarks that the master Karpathy trusts. Image CommandR+ from AI unicorn Cohere. The co-founder and CEO of this large model startup is none other than Aidan Gomez, the youngest author of Transformer (referred to as the wheat harvester). As soon as this battle report came out, another wave of big model clubs started
