Navigation avec des Liens en ReactJS

L'Équipe Alphorm
L'Équipe Alphorm 14e lecture en min

Dans notre précédent article, nous avons exploré le contrôle des formulaires en ReactJS, une fonctionnalité clé pour gérer les interactions utilisateur. Aujourd’hui, nous allons nous concentrer sur un autre aspect essentiel du développement d’applications web interactives : la gestion des liens en ReactJS. Cette compétence est indispensable pour tout développeur souhaitant créer des applications fluides et bien structurées. Dans cet article, nous explorerons comment mettre en place les bases de notre application, créer une zone de navigation efficace, et utiliser des outils tels que react-router-dom pour gérer les chemins et les liens dynamiques. Que vous soyez débutant ou développeur expérimenté, ce guide vous aidera à maîtriser les concepts clés de la navigation en ReactJS, en 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.

Capture d'écran montrant l'affichage initial du composant Orange dans une application ReactJS.

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 :

Capture d'écran des modifications apportées aux composants de l'application ReactJS.

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 :

Capture d'écran montrant le résultat final après les modifications des composants

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:

Capture d'écran montrant le résultat final après avoir redémarré le projet ReactJS.

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
				
			
Capture d'écran montrant le navigateur avec des liens de navigation actifs .

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.

Pour approfondir vos connaissances et maîtriser pleinement ReactJS, découvrez notre formation vidéo sur React.

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.

Capture d'écran de la commande utilisée pour installer la dépendance react-router-dom dans ReactJS.

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 :

Capture d'écran montrant le résultat final de la navigation entre les composants dans une application ReactJS.

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.

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.

ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.