Résumé des méthodes de saut de routage React

Cette fois, je vais vous apporter un résumé des méthodes de saut de Reactroutage, et quelles sont les précautions pour les sauts de route React. Voici des cas pratiques, jetons un coup d'oeil.

Préface

React-Router a été publié en plusieurs versions, et il existe peu de façons d'utiliser le routage Navigation Idem, résumons-le ici.

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 :

Explication détaillée du cas d'utilisation de la méthode de téléchargement Vue.js

Comment faire fonctionner Node. js et utilisez la boîte de dialogue ngDialog

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!