Summary of routing jump methods in different versions of React

This time I will bring you different versions of ReactroutingA summary of jump methods, what are the notes for routing jumps in different versions of React, the following is a practical case, let’s take a look one time.

Preface

React-Router has released multiple versions, and the methods of using routingNavigation are all different. Let’s summarize them 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')

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);

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:

AngularJS modal box template ngDialog use case sharing

##Detailed explanation of the steps to use cookies to stay logged in

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