React Router V6 : Prémière Partie
Hello 👋, Bienvenue dans ce tutoriel dans lequel nous allons voir comment configurer react router v6 dans une application React. Ce tutoriel est la première partie d’une série de tutoriels dans laquelle nous parlerons que de React Router.
Dans cette première partie, nous allons aborder les points suivants:
- C’est quoi React Router Dom ?
- Création de notre application et installation de React router
- Configuration des Routes et Création des liens de navigations
- Le Lien actif
- La navigation programmée
- La non correspondance de routes
C’est quoi React Router :
D’après la documentation officielle: React Router Dom est une bibliothèque de routage complète côté client et côté serveur pour React qui fonctionne partout où React fonctionne sur le web, sur le serveur avec node.js, et sur React Native.
Bon, je vous laisse prendre un verre d’eau 🥛, de café ☕,… avant de me lancer. Ohhh j’espère que c’est fait et que vous êtes prêts, let’s go guys.
Création de notre application et installation de React router
Commençons par créer notre application et installer react-router-dom en exécutant les commandes ci-dessous:
npx create-react-app react-router-v6
cd react-router-v6
//installons-react-router
npm install react-router-dom@6.3.0
ou
//yarn add react-router-dom@6.3.0Configurations des Routes:
Nous devons envelopper toutes les routes de notre App par BrowserRouter pour que react-router fonctionne, pour cela ouvrons le fichier index.js et mettons le à jour:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);Créons notre menu de navigation avant de continuer la configurations des Routes
Nous allons créer un nouveau composant “Navbar” et collez le code ci-dessous:
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg bg-light mb-4">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
React Router V6
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link" to="/">
Accueil
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/tutoriels">
Tutoriels
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/a-propos">
A propos
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;Importons le menu de navigation dans l’App.js
import Navbar from "./components/Navbar";
function App() {
return (
<div className="app">
<Navbar />
</div>
);
}
export default App;Lançons notre application, pour voir le menu de navigation
Dans notre exepmle j’ai utilisé le cdn directement en l’important dans l’entête de la page index.html qui se trouve dansle dossier /public
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>Si nous voulons un menu responsive, ajouter ce script dans le body(juste avant la balise fermante) de la page index.html.
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"
></script>
Maintenant si vous cliquez sur les liens, les url changent, ce qui veut dire que react router est au contrôle.
Mais le contenu des pages ne change pas🙄 ?
Bah c’est normal non, vu que nous n’avons pas encore configuré nos routes et que nous avons qu’une seule page;
Commençons par créer ces trois pages Accueil.js, Tutoriels.Js et Apropos.Js en les plaçant dans src/components.
//Page d'acceuil
import React from "react";
const Accueil = () => {
return (
<div>
<h1>Hello bienvenue, sur mon site</h1>
</div>
);
};
export default Accueil;//Page des tutoriels
import React from "react";
const Tutoriels = () => {
return (
<div>
<h1>Mes Tutoriels</h1>
</div>
);
};
export default Tutoriels;//Page A propos
import React from "react";
const Apropos = () => {
return (
<div>
<h1>A propos de nous</h1>
</div>
);
};
export default Apropos;Créons nos routes dans l’App.js
import { Route, Routes } from "react-router-dom";
import Accueil from "./components/Accueil";
import Apropos from "./components/Apropos";
import Navbar from "./components/Navbar";
import Tutoriels from "./components/Tutoriels";
function App() {
return (
<div className="app">
<Navbar />
<Routes>
<Route path="/" element={<Accueil />} />
<Route path="tutoriels" element={<Tutoriels />} />
<Route path="a-propos" element={<Apropos />} />
</Routes>
</div>
);
}
export default App;Cliquez sur vos liens vous verrez que le contenu de vos pages changent sans même que la page s’actualise, c’est fantastique non…
Si vous avez réussi au premier essai, Bravo 👏👏👏 à vous. Par contre, si ce n’est pas le cas, n'hésitez pas à recommencer pour voir ce que vous avez raté.
Le Lien actif:
Nous avons souvent besoin dans les menus de navigation de montrer le lien actif à l’utilisateur pour montrer sur quelle page il se trouve. Pour faire cela nous allons modifier le code de notre navigation par le code ci-dessous:
import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = () => {
const activeLinkStyle = ({ isActive }) => {
return {
color: isActive && "red",
};
};
return (
<nav className="navbar navbar-expand-lg bg-light mb-4">
<div className="container-fluid">
<NavLink className="navbar-brand" to="/">
Mon Blog
</NavLink>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className="collapse navbar-collapse"
id="navbarNav"
>
<ul className="navbar-nav">
<li className="nav-item">
<NavLink
className="nav-link"
to="/"
style={activeLinkStyle}
>
Home
</NavLink>
</li>
<li className="nav-item">
<NavLink
className="nav-link"
to="/posts"
style={activeLinkStyle}
>
Blog
</NavLink>
</li>
<li className="nav-item">
<NavLink
className="nav-link"
to="/about"
style={activeLinkStyle}
>
About
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Voyons ce que nous avons fait ici:
- Nous avons remplacé Link par NavLink.
- Nous avons modifié la couleur de notre lien en examinant la valeur isActive que NavLink a transmise à notre fonction de style.
Vous pouvez faire la même chose avec className sur NavLink comme ceci :
<NavLink className={({ isActive }) => isActive ? "ma-classe-active" : "non-active-classe"} />La Navigation Programmée
Jusqu'à présent, nous n'avons utilisé la navigation déclarative qu'en utilisant le composant Link ou NavLink. Dès fois, il arrive que vous ayez besoin de pouvoir naviguer de manière programmée. Nous allons illustrer cela par un petit exemple: Supposons que nous ayons un formulaire de contact et que nous voulons rediriger l’utilisateur vers la page d’accueil lorsque le formulaire est soumis avec succès.
Pour mettre ceci en pratique, nous allons commencer par créer une page de contact
import React from "react";
const Contact = () => {
return (
<div className="row">
<div className="col-md-6 mx-auto">
<h1>Contactez-nous</h1>
<form>
<div className="form-group mb-3">
<label htmlFor="email">Email</label>
<input type="text" id="message" className="form-control" />
</div>
<div className="form-group mb-3">
<label htmlFor="message">Message</label>
<textarea id="message" className="form-control" />
</div>
<div className="form-group">
<button className="btn-success btn">Envoyer</button>
</div>
</form>
</div>
</div>
);
};
export default Contact;Puis configurer la route de notre page dans l’app.js
//A Ajouter dans App.js
<Route path="contactez-nous" element={<Contact />} />
//N'oubliez pas d'importer le composant
import Contact from "./components/Contact";Ensuite nous allons ajouter un lien sur notre page d’accueil qui va nous rediriger sur la page de contact
import React from "react";
import { Link } from "react-router-dom";
const Accueil = () => {
return (
<div>
<h1>Hello bienvenue, sur mon site</h1>
<Link to="/contactez-nous" className="btn btn-primary">
Contactez-nous
</Link>
</div>
);
};
export default Accueil;Et enfin nous allons créer une fonction qui sera appelé lorsque le formulaire est soumis, et utiliser le hook useNavigate pour rediriger l’utilisateur vers la page d’accueil;
import { useNavigate } from "react-router-dom";
const Contact = () => {
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
alert("Votre message a été envoyé avec success");
navigate("/");
};
return (
<div className="row">
<div className="col-md-6 mx-auto">
<h1>Contactez-nous</h1>
<form onSubmit={handleSubmit}>
<div className="form-group mb-3">
<label htmlFor="email">Email</label>
<input type="text" id="message" className="form-control" />
</div>
<div className="form-group mb-3">
<label htmlFor="message">Message</label>
<textarea id="message" className="form-control" />
</div>
<div className="form-group">
<button className="btn-success btn">Envoyer</button>
</div>
</form>
</div>
</div>
);
};Wow 😮, facile non. Un autre exemple, vous voulez créer un bouton retour: c’est à dire un bouton qui fait la même action que si vous cliquez sur le bouton retour de votre navigateur: Pour cela voici comment utiliser la navigation
//A Ajouter sur la page d'accueil
<div className="p-2 mt-3">
<button className="btn-danger btn"
onClick={() => navigate(-1)}
>
Retour
</button>
</div>La Non Correspondance de route(No Match Route):
Lorsque vous saisissez une url dont la route n’existe pas, vous aurez une page blanche. Par exemple essayez d’aller vers cette url “http://localhost:3000/no-match-route/”, vous verrez que la bar de navigation parce que le menu est directement importer dans l’app.Js Commentez le composant Navbar dans l’App.js
{/* <Navbar /> */}Vous obtiendrez une page automatiquement blanche, pour indiquer qu’il n’y a pas une correspondance nous allons juste ajouter une route de non correspondance dans l’App.js qui correspondra à la page 404 de notre application
<Route path="*" element={<Page404 />} />Et créer ensuite le composant “Page404”
import React from "react";
const Page404 = () => {
return (
<div className="pt-5 text-center">
<h1>Oops!</h1>
<p>Aucune page a été trouvée.</p>
</div>
);
};
export default Page404;Revenez sur votre navigateur, vous verrez maintenant un message indicatif.
Essayez de taper n’importe quoi comme route,vous aurez toujours le même message.
Enfin, retenez que React Router Dom est utilisé pour construire des applications à page unique, c'est-à-dire des applications qui ont plusieurs pages ou composants, mais la page n'est jamais rafraîchie, au lieu de quoi le contenu est récupéré dynamiquement en fonction de l'URL. Cette manière de faire est très très rapide que la navigation traditionnelle des sites.
Dans la prochaine partie, nous allons aborder les nested routes qui est l’une des plus grande nouvelle fonctionnalité que la version 6 a apportée.
Participe à la discussion