Summary of React routing jump methods

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

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:

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!