La gestion de la navigation entre différentes vues dans une application React peut être complexe, entraînant des liens brisés ou une navigation confuse.
Cela peut frustrer les utilisateurs, rendant l’application difficile à utiliser et affectant leur expérience globale.
Avec react-router-dom, simplifiez la création de routes dynamiques et assurez une navigation fluide. Cet article vous guide à travers les étapes clés pour configurer des chemins et des liens robustes, garantissant une expérience utilisateur optimale.
Liens ReactJS : Mettre en place les bases de notre application
Premier composant : src/component/orage.js
import '../styles/orange.css'
export default function Orange(){
return(
<section className="orange">
< h2>Orange< /h2>
<p>lorum upsom</p>
</section>
)
}
import '../styles/orange.css':Cette ligne importe un fichier CSS nommé orange.css qui contient les styles spécifiques pour le composant Orange.export default function Orange() { ... }:Cela déclare un composant fonctionnel Orange qui sera exporté par défaut. Ce composant représente la section avec fond orange.
Le retour de la fonction Orange rend le JSX qui définit la structure de la section. Elle contient un titre <h2> avec le texte « Orange » et un paragraphe <p> avec le texte « lorum upsom ».
La section a une classe CSS définie comme orange, qui est définie dans le fichier orange.css importé. Cette classe définit les styles spécifiques pour rendre le fond de la section en orange.
Ajouter des styles css pour notre composant pour le mettre en forme :
Src/styles/orange.css
orange{
background-color:orange;
width: 75%;
margin: auto;
text-align: center;
padding: 20px;
}
Après le lancement de l’application, nous obtenons initialement un résultat tel que celui-ci.
Puis,Créons le troisième composant :
Src/component/yellow.js
import '../styles/yellow.css'
export default function Yellow(){
return(
<section className="yellow">
< h2>Yellow< /h2>
<p>lorum upsom</p>
</section>
)
}
Et comme précédemment, ajoutons des styles CSS. Créez un fichier nommé yellow.css dans le répertoire src/styles. Nous allons utiliser les mêmes propriétés que celles données dans orange.css.
.yellow{
background-color:yellow;
width: 75%;
margin: auto;
text-align: center;
padding: 20px;
}
Et après tout cela, nous avons apporté quelques modifications que vous pouvez observer ici :
Ensuite, creeons le troisieme composant :
import '../styles/red.css'
export default function Red(){
return(
<section className="red">
< h2>Yellow< /h2>
<p>lorum upsom</p>
</section>
)
}
Et ajoutons également des styles CSS. Nous pouvons utiliser les mêmes propriétés que celles données aux deux composants précédents. Créez un fichier nommé red.css dans le répertoire src/styles.
.red{
background-color:yellow;
width: 75%;
margin: auto;
text-align: center;
padding: 20px;
}
Et cela nous donne comme ceci :
Liens ReactJS : Créer une zone de navigation
Une fois nos trois composants mis en place, nous allons maintenant créer la zone de navigation pour établir une navigation fluide entre ces composants.
Étant donné que nous ne créons pas de composant ici, nous allons créer le fichier nav.js dans le répertoire src.
import './styles/nav.css'
export default function Nav(){
return(
<nav>
<ul>
<li className='lienOrange'>orange</li>
<li className='lienYellow'>yellow</li>
<li className='lienRed'>red</li>
</ul>
</nav>
)
}
Le retour de la fonction Nav rend le JSX qui définit la structure de la barre de navigation. Elle contient une balise <nav> qui englobe une liste <ul> contenant trois éléments de liste <li>. Chaque élément de liste contient un lien vers un composant spécifique.
Chaque élément de liste a une classe CSS spécifique, lienOrange, lienYellow et lienRed, qui sont définies dans le fichier nav.css importé. Ces classes définissent les styles spécifiques pour les liens ReactJS dans la barre de navigation.
On va lui ajouter des styles ccs pour le mettre en forme :
Src/styles/nav.css
nav{
background-color:#000;
padding: 20px;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-evenly;
}
.lienOrange{
color:orange;
}
.lienYellow{
color:yellow;
}
.lienRed{
color:red;
}
nav li {
font-size: 1.1rem;
text-transform: capitalize;
}
N’oubliez pas d’importer le fichier nav.js afin d’appeler le composant Nav dans le fichier app.js.
Il sera être comme ceci:
import Orange from './component/orange'
import Yellow from './component/yellow'
import Red from './component/red'
import Nav from './nav'
export default function App(){
return(
<section>
<Nav/>
<Orange/>
<Yellow/>
<Red/>
</section>
)
}
En testant si tout fonctionne bien jusqu’à maintenant, redémarrer le projet et regardons le résultat:
On a correctement mis en place la navigation. Cependant, envisagez la situation où l’utilisateur souhaite afficher un composant spécifique en cliquant sur le lien correspondant. Comment pouvons-nous y parvenir ? En d’autres termes, si l’utilisateur clique sur « orange« , seul le composant orange est affiché, et s’il clique sur « yellow« , le composant correspondant est affiché, etc.
Liens ReactJS : Installer la dépendance react-router-dom
Pour l’implémenter, installons d’abord les dépendances react-route-dom .
Déjà, react-route-dom est une bibliothèque pour la navigation dans les applications React. Elle offre des fonctionnalités puissantes pour gérer la navigation entre différentes vues et composants dans une application web.
Donc , pour l’installer,
Ouvrez votre terminale. Et mettez vous dans le repertoire de votre projet et puis taper la commande :
npm install react-router-dom
Bien, l’installation est maintenant complète. Vous pouvez confirmer cela en vérifiant le fichier package.json situé dans le répertoire de votre application à l’emplacement MONAPP/package.json.Vous verrez cette ligne
« react-router-dom »: « ^6.22.0 »,
Cela prouve react-route-dom est bien installé et grâce à cela que notre navigation sera navigable , parfait.
Importer BrowserRouter dans ReactJS
Nous allons maintenant importer BrowserRouter à partir de react-router-dom pour configurer nos liens ReactJS. Si vous vous demandez ce qu’est exactement BrowserRouter, c’est un composant fourni par React Router DOM, une bibliothèque de routage pour les applications React. Son rôle est d’encapsuler votre application et de fournir le contexte du routage à tous les composants enfants.
Donc, pour l’importer, rendez-vous dans le fichier index.js dans le dossier src : src
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import App from './app';
import { BrowserRouter } from 'react-router-dom';}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.StrictMode>
);
On a cette ligne :
import { BrowserRouter } from 'react-router-dom';}
Avec cette ligne de code, vous pouvons voir comment importer le composant BrowserRouter de react-router-dom.
<BrowserRouter> : Enveloppe l’application avec le composant BrowserRouter de React Router DOM. Cela fournit un contexte de routage à tous les composants enfants.
<App /> : Rend le composant racine de l’application à l’intérieur du BrowserRouter. C’est à partir de cet endroit que l’ensemble de l’application est rendu et que la navigation entre les différentes vues est gérée.
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Créer les chemins de navigation en ReactJS
Ensuite , nous allons créer les chemins pour notre routage , d’une autre terme, nous allons etablir un url pour chaque nos composants.
Pour le faire alors, exmaninons la modification dans le fichier app.js : src/component/app.js
import Orange from './component/orange';
import Yellow from './component/yellow';
import Red from './component/red';
import Nav from './nav';
import {Routes,Route} from 'react-router-dom';
export default function App(){
return(
<section>
<Nav/>
<Routes>
<Route path="/" element = {<Orange/>}></Route>
<Route path="/yellow" element = {<Yellow/>}></Route>
<Route path="red" element = {<Red/>}></Route>
</Routes>
</section>
)
}
cette ligne nous importe les composants Routes et Route de React Router DOM. Ils sont utilisés pour définir les routes de l’application.
<Route path="/" element={<Orange />} />: Définit une route pour l’URL de base (/) et spécifie que le composant Orange doit être rendu lorsque cette route est atteinte.<Route path="/yellow" element={<Yellow/>} /> :Définit une route pour l’URL /yellow et spécifie que le composant Yellow doit être rendu lorsque cette route est atteinte.<Route path="/red" element={<Red/>}/>: Définit une route pour l’URL /red et spécifie que le composant Red doit être rendu lorsque cette route est atteinte.
Créer les liens de navigation en ReactJS
On a créé nos chemins, maintenant il est temps de créer nos liens ReactJS. Examinons les modifications pour en faire dans le fichier nav.js : src/nav.js
import { NavLink } from 'react-router-dom'
import './styles/nav.css'
export default function Nav(){
return(
<nav>
<ul>
<li className='lienOrange'><NavLink to ="/">orange</NavLink></li>
<li className='lienYellow'><NavLink to ="yellow">yellow</NavLink></li>
<li className='lienRed'><NavLink to ="ed">red</NavLink></li>
</ul>
</nav>
)
}
On a cette ligne :
import { NavLink } from ‘react-router-dom’
Elle importe le composant NavLink depuis react-router-dom. NavLink est utilisé pour créer des liens ReactJS de navigation dans votre application React tout en bénéficiant des fonctionnalités de routage de React Router DOM.
- <li className=’lienOrange’><NavLink to= »/ »>orange</NavLink></li> : Crée un lien de navigation avec le texte « orange » qui redirige vers l’URL racine (« / ») de l’application. Le NavLink est utilisé ici pour activer des fonctionnalités de navigation spécifiques de React Router, telles que la classe active lorsque le lien est actif.
- <li className=’lienYellow’><NavLink to= »yellow »>yellow</NavLink></li> : Crée un lien de navigation avec le texte « yellow » qui redirige vers l’URL « /yellow » de l’application.
- <li className=’lienRed’><NavLink to= »red »>red</NavLink></li> : Crée un lien de navigation avec le texte « red » qui redirige vers l’URL « /red » de l’application.
Et en lançant votre application, vous pouvez remarquer que votre navigation devient des liens.
Vous vous demandez peut-être pourquoi seul le composant orange s’affiche. Cela est dû au fait que nous sommes à la racine de notre URL, et donc le composant orange est celui qui est configuré pour s’afficher à cet emplacement.
Ajouter des petites styles css pour mettre en forme notre page :Regarond les modifications dans le fichier nav.css
Src/styles/nav.css
nav li {
font-size: 1.1rem;
text-transform: capitalize;
}
nav a {
font-size:1.1rem ;
text-transform: capitalize;
text-decoration: none;
}
nav a :hover{
text-decoration: underline;
}
Et cela nous donne :
Liens ReactJS : Créer un lien actif
Comme vous pouvez voir, les textes de navigation ne sont plus souligner ainsi il y en a encore certaines modifications.
Nous approchons de la fin de notre objectif avec succès. Pour conclure, nous allons définir nos liens ReactJS actifs, c’est-à-dire les liens qui seront mis en évidence visuellement lorsque leur destination correspond à l’URL actuelle de notre application.
Implementons le maintenant, donc pour le faire, ajouter une propriété css dans le fichier nav.css : src/styles/nav.css
.active{
color:white;
font-weight: 700;
}
Vous vous demandez peut-être d’où vient cette classe ?? Cette classe n’est pas defini dans notre code mais elle est utilisée pour styliser les liens ReactJS de navigation actifs dans une application Web.
color: white; : Cette règle définit la couleur du texte des liens actifs en blanc. Cela signifie que lorsque le lien est actif, le texte sera affiché en blanc avec épaisseur de la police 700 des liens actifs.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En conclusion, comprendre et maîtriser la gestion des liens en ReactJS est crucial pour développer des applications web performantes et intuitives. En suivant les étapes détaillées dans cet article, vous serez capable de mettre en place des bases solides pour votre application, de créer une navigation fluide, et d’utiliser efficacement react-router-dom pour gérer les chemins et les liens actifs.
L’intégration de ces techniques dans vos projets vous permettra d’améliorer l’expérience utilisateur et de rendre vos applications ReactJS plus robustes et flexibles.
