Création et Gestion de la Navigation
Après avoir configuré le routage de base, mis en place le chargement paresseux et ajouté des composants de repli, l'étape essentielle suivante consiste à offrir aux utilisateurs les moyens de naviguer entre les pages de notre application.
React Router fournit les composants Link
et NavLink
, analogues à la balise HTML a
. Ces composants permettent de mettre à jour l'URL dans la barre d'adresse du navigateur sans recharger l'intégralité de la page.
import { Link } from "react-router-dom";
<Link to="path_value">Any text</Link>
- La propriété
to
spécifie la route ou le chemin cible vers lequel le lien doit naviguer. Remplacezpath_value
par le chemin souhaité ; Any text
correspond au contenu affiché comme lien. Vous pouvez le remplacer par le texte ou le contenu JSX désiré.
Exemple
Créons un composant séparé appelé Bar pour gérer la navigation de l'ensemble de l'application. Voici le code :
const Bar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contacts">Contacts</Link>
</li>
</ul>
<hr />
</nav>
);
};
Ce code définit un composant fonctionnel appelé Bar
, qui représente une barre de navigation. Il affiche un élément <nav>
contenant une liste non ordonnée <ul>
avec trois éléments de liste <li>
. Chaque élément de liste inclut un composant Link
provenant de la bibliothèque react-router-dom
.
- Ligne 6 : Le premier composant
Link
représente un lien vers la page "Home" ; - Ligne 9 : Le deuxième composant
Link
représente un lien vers la page "About" ; - Ligne 12 : Le troisième composant
Link
représente un lien vers la page "Contacts".
Ces composants Link
permettent la navigation au sein de l'application en mettant à jour l'URL dans la barre d'adresse du navigateur sans recharger la page. Lorsqu'un utilisateur clique sur un lien, la route ou le chemin correspondant est activé et le composant associé sera affiché.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 4.17
Création et Gestion de la Navigation
Glissez pour afficher le menu
Après avoir configuré le routage de base, mis en place le chargement paresseux et ajouté des composants de repli, l'étape essentielle suivante consiste à offrir aux utilisateurs les moyens de naviguer entre les pages de notre application.
React Router fournit les composants Link
et NavLink
, analogues à la balise HTML a
. Ces composants permettent de mettre à jour l'URL dans la barre d'adresse du navigateur sans recharger l'intégralité de la page.
import { Link } from "react-router-dom";
<Link to="path_value">Any text</Link>
- La propriété
to
spécifie la route ou le chemin cible vers lequel le lien doit naviguer. Remplacezpath_value
par le chemin souhaité ; Any text
correspond au contenu affiché comme lien. Vous pouvez le remplacer par le texte ou le contenu JSX désiré.
Exemple
Créons un composant séparé appelé Bar pour gérer la navigation de l'ensemble de l'application. Voici le code :
const Bar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contacts">Contacts</Link>
</li>
</ul>
<hr />
</nav>
);
};
Ce code définit un composant fonctionnel appelé Bar
, qui représente une barre de navigation. Il affiche un élément <nav>
contenant une liste non ordonnée <ul>
avec trois éléments de liste <li>
. Chaque élément de liste inclut un composant Link
provenant de la bibliothèque react-router-dom
.
- Ligne 6 : Le premier composant
Link
représente un lien vers la page "Home" ; - Ligne 9 : Le deuxième composant
Link
représente un lien vers la page "About" ; - Ligne 12 : Le troisième composant
Link
représente un lien vers la page "Contacts".
Ces composants Link
permettent la navigation au sein de l'application en mettant à jour l'URL dans la barre d'adresse du navigateur sans recharger la page. Lorsqu'un utilisateur clique sur un lien, la route ou le chemin correspondant est activé et le composant associé sera affiché.
Merci pour vos commentaires !