Home Web Front-end JS Tutorial Summary of React routing jump methods

Summary of React routing jump methods

May 30, 2018 pm 01:54 PM
react Summary routing

This time I will bring you a summary of Reactroutingjump methods, and what are the notes for React route jumps. The following is a practical case, let’s take a look.

Preface

React-Router has been released in multiple versions, and there are not many ways to use routingNavigation Same, let’s summarize it here.

React-Router 2.0.0 version

2.0.0 version needs to use browserHistory to jump, please refer to the code for details:

import { browserHistory } from 'react-router'
browserHistory.push('/path')
Copy after login

React-Router version 2.4.0 or above

React-Router version 2.4.0 or above, you can add this to the component through the mixin method. routerAttribute, and then perform the corresponding operation. The specific mixin code reference is as follows:

import { withRouter } from 'react-router';
clsss ABC extends Component {
}
module.exports = withRouter(ABC);
Copy after login

Components that have used mixin will have the attribute of this.router, and only need to use this.props.router .push('/path') can jump to the corresponding route.

React-Router version 3.0.0 or above

After version 3.0.0, there is no need to manually mixin related router attributes. Write this.props.router.push('/path') in the jumped component to jump to the corresponding route.

React-Router version 4.0 and above

Routing jump

React-Router 4.0 has improved routing. The router attribute has been changed to the history attribute, and the usage method is still the same as in 3.0. Anywhere that needs to be jumped, use this.props.history.push('/path') to jump.

Getting parameters

Use this.props.match.params.xxx You can get the parameters of the current route

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

Recommended reading:

Detailed explanation of the case of using Vue.js download method

How to operate Node.js and use the dialog box ngDialog

The above is the detailed content of Summary of React routing jump methods. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

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

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PHP, Vue and React: How to choose the most suitable front-end framework? PHP, Vue and React: How to choose the most suitable front-end framework? Mar 15, 2024 pm 05:48 PM

PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.

Java Apache Camel: Building a flexible and efficient service-oriented architecture Java Apache Camel: Building a flexible and efficient service-oriented architecture Feb 19, 2024 pm 04:12 PM

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

Integration of Java framework and front-end React framework Integration of Java framework and front-end React framework Jun 01, 2024 pm 03:16 PM

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.

Use JavaScript functions to implement web page navigation and routing Use JavaScript functions to implement web page navigation and routing Nov 04, 2023 am 09:46 AM

In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page

Dynamic addition and deletion methods of routes in uniapp Dynamic addition and deletion methods of routes in uniapp Dec 17, 2023 pm 02:55 PM

Uniapp is a cross-end framework based on Vue.js. It supports one-time writing and generates multi-end applications such as H5, mini programs, and APPs at the same time. It pays great attention to performance and development efficiency during the development process. In Uniapp, the dynamic addition and deletion of routes is a problem that is often encountered during the development process. Therefore, this article will introduce the dynamic addition and deletion of routes in Uniapp and provide specific code examples. 1. Dynamic addition of routes Dynamic addition of routes can be done according to actual needs when the page is loaded or after user operation.

Sorting out Win11 errors and issues Sorting out Win11 errors and issues Jan 13, 2024 pm 08:21 PM

Some people want to update win11, but they don’t know if there are many bugs in win11 and whether the update will cause problems. In fact, there are bugs in win11 now, but they have little impact on use. Are there many bugs in win11? Answer: There are still many bugs in win11. However, these bugs have little impact on daily use. If the user has high requirements for daily use, it is recommended to use it later. Summary of win11 bugs 1. Resource Manager 1. Sometimes memory overflow occurs, resulting in high memory usage of the Resource Manager. 2. This situation will cause the memory to occupy more than 70%, causing the computer to freeze or even crash. 2. Conflict and crash 1. Some applications are not compatible enough, causing conflicts with each other. 2. Although there are relatively few conflict procedures,

Tips for using route interceptors in uniapp Tips for using route interceptors in uniapp Dec 17, 2023 pm 04:30 PM

Tips for using route interceptors in uniapp In uniapp development, route interceptors are a very common function. Route interceptors allow us to perform some specific operations before routing jumps, such as permission verification, page passing parameters, etc. In this article, we will introduce the tips for using route interceptors in uniapp and provide specific code examples. Create a route interceptor First, we need to create a route interceptor in the uniapp project. The creation method is as follows: Create an inter in the project root directory

How to use Golang functions to handle web request routing How to use Golang functions to handle web request routing May 02, 2024 am 10:18 AM

In Golang, using functions to handle web request routing is an extensible and modular method of building APIs. It involves the following steps: Install the HTTP router library. Create a router. Define path patterns and handler functions for routes. Write handler functions to handle requests and return responses. Run the router using an HTTP server. This process allows for a modular approach when handling incoming requests, improving reusability, maintainability, and testability.

See all articles