React Router est une bibliothèque standard pour le routage dans React. Il permet la navigation entre les vues de différents composants dans une application React, permet de modifier l'URL du navigateur et maintient l'interface utilisateur synchronisée avec l'URL.
Pour comprendre le fonctionnement de React Router, créons une application simple pour React. L'application comprendra les composants Accueil, À propos et Contact. Nous utiliserons React Router pour naviguer entre ces composants.
npx créer-réagir-application
Votre environnement de développement est prêt. Installons maintenant React Router dans notre application.
Réagir au routeur : React Router peut être installé dans votre application React via npm. Suivez les étapes ci-dessous pour configurer le routeur dans votre application React :
Étape 1 : CD dans le répertoire de votre projet, c'est à dire ., java.
Étape 2 : utilisez la commande suivante pour installer React Router :
npm install - -save réagir-router-dom
Après avoir installé React-Router-dom, ajoutez ses composants à votre application React.
Ajout de composants du routeur React :
Les principaux composants de React Router sont :
Au lieu de traverser en séquence, les itinéraires sont sélectionnés en fonction de la meilleure correspondance.
Pour ajouter des composants React Router à votre application, ouvrez le répertoire de votre projet dans l'éditeur que vous utilisez et accédez au fichier app.js. Maintenant, ajoutez le code ci-dessous à app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Remarque : BrowserRouter est alias Router.
Utilisation de React Router : Pour utiliser React Router, créons d'abord quelques composants dans l'application React. Dans le répertoire de votre projet, créez un dossier nommé composants dans le dossier src et ajoutez maintenant 3 fichiers nommés home.js, about.js et contact.js dans le dossier des composants.
Ajoutons du code à nos 3 composants :
Accueil.js :
import React from 'react'; function Home (){ return } export default Home; À propos de.js :
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js :
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Maintenant, incluons les composants React Router dans l'application :
NavigateurRouteur : ajoutez un alias BrowserRouter en tant que routeur à votre fichier app.js pour envelopper tous les autres composants. BrowserRouter est un composant parent et ne peut avoir qu'un seul enfant.
class App extends Component { render() { return ( ); } } Liens: Créons maintenant les liens de nos composants. Le composant Link utilise des accessoires pour décrire l'emplacement vers lequel le lien doit naviguer.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Maintenant, exécutez votre application sur l'hôte local et cliquez sur le lien créé. Vous remarquerez que les URL changent en fonction de la valeur du composant lien.
Itinéraire : Le composant route nous aidera à établir le lien entre l'interface utilisateur du composant et l'URL. Pour inclure l'itinéraire dans l'application, ajoutez le code ci-dessous à votre app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Les composants sont maintenant connectés et cliquer sur n'importe quel lien affichera le composant correspondant. Essayons maintenant de comprendre les accessoires associés au composant racine.
- L'élément fait référence au composant qui sera rendu si le chemin correspond.
Remarque : Par défaut, les routes sont inclusives, ce qui signifie que plusieurs composants de route peuvent correspondre à un chemin d'URL et s'afficher simultanément. Si nous voulons restituer un seul composant, nous devons utiliser des routes ici.
Itinéraires : Pour lire un seul composant, enveloppez toutes les routes dans le composant Routes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Changez de groupe sur plusieurs itinéraires, parcourez-les et trouvez le premier qui correspond au chemin. Ainsi, le composant correspondant du chemin est rendu.
Voici notre code source complet après avoir ajouté tous les composants :
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Maintenant, vous pouvez cliquer sur le lien et parcourir les différents composants. React Router maintient l'interface utilisateur de votre application synchronisée avec l'URL.
Enfin, nous avons implémenté avec succès la navigation dans notre application React à l'aide de React Router.
Un qui utilise l'API d'historique HTML5 (événements pushstate, replacestate et popstate) pour garder votre interface utilisateur synchronisée avec l'URL.
nom de base : chaîne
URL de base pour tous les emplacements. Si votre application est servie à partir d'un sous-répertoire de votre serveur, vous souhaiterez la définir dans ce sous-répertoire. Un nom de base correctement formaté doit contenir une barre oblique au début, mais aucune barre oblique à la fin.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation : fonction
Une fonction à utiliser pour confirmer la navigation. Par défaut, il utilise window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh : booléen
Si cela est vrai, le routeur utilisera la navigation sur la page avec actualisations pleine page. Vous souhaiterez peut-être l'utiliser pour imiter le fonctionnement d'une application traditionnelle rendue par un serveur avec des actualisations de page complète entre les pages de navigation.
longueur de clé : numéro
La longueur de l'emplacement. Clé. La valeur par défaut est 6.
enfants : nœud- élément enfant à restituer.
Remarque : sur React, vous devez utiliser un seul élément enfant car la méthode render ne peut pas renvoyer plus d'un élément. Si vous avez besoin de plusieurs éléments, vous pouvez essayer de les envelopper dans un ou .
Un qui utilise la partie hachage de l'URL (c'est-à-dire window.location.hash) pour garder votre interface utilisateur synchronisée avec l'URL.
Remarque : le hachage ne prend pas en charge l'emplacement de l'historique. Clé ou emplacement. État. Dans les versions précédentes, nous avons essayé de réduire le comportement, mais il y avait des cas extrêmes que nous ne pouvions pas résoudre. Tout code ou plugin nécessitant ce comportement ne fonctionnera pas.
Étant donné que cette technologie est destinée à prendre en charge uniquement les anciens navigateurs, nous vous encourageons à configurer votre serveur pour qu'il fonctionne à la place.
nom de base : chaîne
L'URL de base pour tous les emplacements. Un nom de base correctement formaté doit avoir une barre oblique au début, mais pas de barre oblique à la fin.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation : fonction
Une fonction à utiliser pour confirmer la navigation. Par défaut, il utilise window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> Type de hachage : chaîne
L'encodage utilisé pour fenêtre.emplacement.hash . Les valeurs disponibles sont :
- 'slash' - crée des hachages comme #/ et #/sunshine/lollipops
- 'noslash' - # et #sunshine/lollipops . comme le hachage crée
- 'hashbang' - crée des hachages 'ajax crawlable' (obsolètes par Google) comme #!/ et #!/sunshine/lollipops
La valeur par défaut est « barre oblique ».
enfants : nœud
Un seul élément enfant à restituer.
Fournit une navigation déclarative et accessible autour de votre application.
About
à : chaîne
Une représentation sous forme de chaîne d'un emplacement de lien est créée en combinant les propriétés de chemin d'accès, de recherche et de hachage de l'emplacement.
Objet pouvant avoir l'une des propriétés suivantes :
à : fonction
Une fonction dans laquelle l'emplacement actuel est passé en argument et qui doit renvoyer la représentation de l'emplacement sous forme de chaîne ou d'objet.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> remplacer : booléen
Lorsque c'est vrai, cliquer sur le lien remplacera l'entrée actuelle au lieu d'en ajouter une nouvelle.
entry to the history stack.
réf interne : func
Depuis React Router 5.1, si vous utilisez React 16, vous ne devriez pas avoir besoin de cet accessoire car nous transmettons la référence au sous-jacent. . Utilisez plutôt une référence normale.
c booléen
Permet d'accéder à la réf intégrée du composant.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef : RefObject
Depuis React Router 5.1, si vous utilisez React 16, vous ne devriez pas avoir besoin de cet accessoire car nous transmettons la référence au sous-jacent. . Utilisez plutôt une référence normale.
Obtenez la référence sous-jacente du composant à l'aide de React.createRef.
let anchorRef = React.createRef()
composant : React.Component
Si vous souhaitez utiliser votre propre composant de navigation, vous pouvez le faire en le passant via le composant prop.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Vous pouvez également transmettre les accessoires sur lesquels vous aimeriez figurer. comme un titre, un identifiant, un nom de classe, etc.
Une version spéciale ajoutera des attributs de style à l'élément rendu s'il correspond à une URL existante.
About
nom de classe : chaîne | fonction
className peut être une chaîne ou une fonction qui renvoie une chaîne. Si la fonction className est utilisée, l'état actif du lien est passé en paramètre. Ceci est utile si vous souhaitez appliquer exclusivement un nom de classe à un lien inactif.
'nav-link' + (!isActive ? ' unselected' : '') } >
FAQ
Dans React Router v6, activeClassName sera supprimé et vous devez utiliser la fonction className pour appliquer le nom de classe aux composants NavLink actifs ou inactifs.
NomClasseActive : chaîne
classe pour donner l’élément lorsqu’il est actif. La classe donnée par défaut est active. Il sera combiné avec le prop classname.
style : objet | fonction
style peut être soit un objet React.CSSProperties, soit une fonction qui renvoie un objet de style. Si le style de fonction est utilisé, l'état actif du lien est passé en paramètre.
({ color: isActive ? 'green' : 'blue' })} > Dans React Router v6, le style actif sera supprimé et vous devez utiliser le style de fonction pour appliquer des styles en ligne aux composants NavLink actifs ou inactifs.
Style actif : Objet
Les styles appliqués à l'élément lorsqu'il est actif.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> strict : booléen
Si c'est vrai, la barre oblique finale sur le chemin d'accès d'un emplacement sera prise en compte pour déterminer si l'emplacement correspond à l'URL actuelle. Voir la documentation pour plus de détails.
Events
isActive : fonction
Une fonction pour ajouter une logique supplémentaire pour déterminer si le lien est actif. Ceci doit être utilisé lorsque vous souhaitez faire plus que vérifier que le chemin d'accès du lien correspond au nom de chemin de l'URL actuelle.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 emplacement : objet
isActive Se compare à l'emplacement actuel de l'historique (généralement l'URL actuelle du navigateur).
aria-current : chaîne
La valeur de l'attribut de zone actuelle utilisé sur le lien actif. Les valeurs disponibles sont :
- 'page' - utilisé pour indiquer un lien dans un ensemble de liens de pagination
- « Étapes » – utilisé pour indiquer un lien dans l'indicateur d'étape pour un processus basé sur des étapes
- 'emplacement' - utilisé pour indiquer une image qui est visuellement mise en évidence comme composant actuel de l'organigramme
- 'date' - utilisé pour indiquer la date actuelle dans le calendrier
- 'heure' - utilisé pour indiquer l'heure actuelle dans un horaire
- 'true' - utilisé pour indiquer si NavLink est actif
- 'false' - utilisé pour empêcher les technologies d'assistance de réagir au lien actuel (un cas d'utilisation serait d'empêcher plusieurs balises de zone actuelles sur une page)