Résumé des méthodes de saut de routage dans différentes versions de React

Cette fois, je vais vous apporter un résumé des différentes versions de Reactroute méthodes de saut, et quelles sont les précautions pour les différentes versions de React route jump. Voici des cas réels, jetons un coup d'oeil une fois.

Avant-propos

React-Router a été publié en plusieurs versions. Les méthodes d'utilisation du routage navigation sont toutes différentes. .

Version React-Router 2.0.0

La version 2.0.0 doit utiliser l'historique du navigateur pour sauter. Veuillez vous référer au code pour plus de détails. :

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

React-Router 2.4.0 ou supérieur

React-Router 2.4.0 ou supérieur, vous pouvez utiliser le mixin méthode pour ajouter des composants this.routerattribute, puis effectuer les opérations correspondantes. La référence du code mixin spécifique est la suivante :

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

Les composants qui ont utilisé mixin auront l'attribut de. this.router. Il vous suffit d'utiliser ceci .props.router.push('/path') pour accéder à l'itinéraire correspondant.

React-Router version 3.0.0 ou supérieure

Après la version 3.0.0, il n'est pas nécessaire de mélanger manuellement les attributs du routeur lié à tout besoin. Écrivez this.props.router.push('/path') dans le composant sauté pour accéder à l'itinéraire correspondant.

React-Router 4.0 ou supérieur

Saut de routage

React-Router 4.0 a amélioré le routage L'attribut routeur a. a été remplacé par l'attribut historique et la méthode d'utilisation est toujours similaire à la version 3.0. Utilisez this.props.history.push('/path') pour sauter partout où vous avez besoin de sauter

L'acquisition des paramètres

peut utiliser this.props.match.params.xxx Obtenez le. paramètres de l'itinéraire actuel

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Modèle de boîte modale AngularJS Partage de cas d'utilisation ngDialog

Étapes détaillées pour utiliser les cookies pour rester connecté

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!