Maison > interface Web > js tutoriel > Résumé des méthodes de saut de routage React

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

php中世界最好的语言
Libérer: 2018-05-30 13:54:13
original
4876 Les gens l'ont consulté

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')
Copier après la connexion

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);
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal