Quels sont les composants communs du routage de réaction ?

Les composants courants du routage React sont : 1. BrowserRouter, définissez le mode de routage sur history ; 2. HashRouter, définissez le mode de routage sur hash ; 4. Link 5. Redirect ; , etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

Le routage React fournit une explication détaillée des composants couramment utilisés

Composants et leurs fonctions :

	Composants	Fonction
Mode de routage	BrowserRouter	Le mode convention est historique, en utilisant HTML5 L'API d'historique fournie pour garder l'interface utilisateur et l'URL synchronisées
Mode de routage	HashRouter	Le mode convenu est le hachage, utilisant le hachage d'URL pour garder l'interface utilisateur et l'URL synchronisées
Saut déclaratif	NavLink	Le saut déclaratif peut également convenir sur le statut d'activation de l'itinéraire
Saut déclaratif	Link	Le saut déclaratif n'a pas de statut d'activation
Redirect	Redirect	Redirect~~ remplacer
Match et affichez les composants	Route	Match et affichez les composants. Autrement dit, une fois la correspondance réussie, le composant est immédiatement remplacé par le composant correspondant
Correspondance exclusive	Switch	Correspondance exclusive. Si vous ne souhaitez pas utiliser l'inclusivité, utilisez Switch.
Composants d'ordre supérieur	withRouter	Dans les composants qui ne sont pas commutés via le routage, transmettez l'historique, l'emplacement et les objets de correspondance dans l'objet props (composants d'ordre supérieur)

structure

• BrowserRouter|HashRouter

  Application (ou autre composant)

  • NavLink|Link
  • Route
  • Redirect
    • Sous-composant
      • NavLink|Link
      • Route
      • …

BrowserRouter

PropertyTypeFunctionbasenamestringL'URL de base pour tous les emplacements. Si votre application est servie à partir d'un sous-répertoire sur le serveur, vous devez la configurer en tant que sous-répertoire. Un nom de base bien formé doit commencer par une barre oblique mais ne pas se terminer par une barre oblique getUserConfirmationFonction par défaut.

		window.confirmLa fonction utilisée pour confirmer la navigation. Utilisez

Route

AttributsTypeFonctionpathstring |objectitinéraire correspondant au chemin. L'itinéraire sans attribut de chemin correspondra toujours exactboolean est vrai, nécessitant une correspondance de chemin complet (/home). Les routes sont "incluses" par défaut (correspondance / et /home), ce qui signifie que plusieurs routes peuvent être mises en correspondance et rendues en même tempscomponentFonction |componentLe composant React ne fonctionnera que lorsque le les correspondances d'adresses sont rendues, les accessoires d'itinéraire seront également rendus ensemblerenderFonctionComposants de rendu et d'empaquetage en ligne, nécessitant un appel pour renvoyer le composant cible🎜"Lien"

replace

booleanS'il faut remplacer l'enregistrement de l'historiqueNavLinkAttributTypeFonctiontostring|object{pathname:,recherche : , hash :}Le chemin ou l'adresse à sauter

replace

booleanS'il faut remplacer l'enregistrement d'historiqueactiveClassNamestringLorsque l'élément est sélectionné, définissez le style de sélection, le la valeur par défaut est active activeStyleobjectLorsque l'élément est sélectionné, définissez le style sélectionnéSwitchCe composant est utilisé pour restituer la première route ou redirection de l'adresse correspondante, et ne restitue qu'un seul itinéraire, un routage exclusif, une correspondance complète par défaut (scénario : barre latérale, onglet guide, etc.) children nodeCe composant est utilisé pour restituer la première route ou redirection correspondant à l'adresse, ne restitue qu'une seule route, route exclusive, correspondance complète par défaut (scénario : barre latérale et le fil d'Ariane, les onglets de démarrage, etc.

		Redirect

propriétés

type rôle stringdeallez Pushpushbooléen

		de
	à	string objet
		Ajouter un historique

exact

booléen

correspondance stricte

sensible[Recommandations associées : Tutoriel vidéo Redis 】

booléen	sensible à la casse

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!