React Router : Gérez la navigation dans vos applications React

Qu'est-ce que React Router ?

React Router est une bibliothèque open-source qui étend les capacités de React en ajoutant un système de routage client. Elle permet de définir des routes, qui sont des chemins spécifiques associés à des composants React.

• Navigation dynamique : Les routes changent l'interface sans recharger la page.
• Synchronisation avec l'URL : L'URL reflète toujours l'état actuel de l'application.
• Flexibilité : Gestion facile des routes dynamiques, des paramètres et des redirections.

Comment installer React Router ?

Pour commencer, installez la bibliothèque avec npm ou yarn :

npm install react-router-dom

Assurez-vous également d'avoir une version récente de React. Une fois installé, importez les composants nécessaires comme BrowserRouter, Routes, et Route.

Utilisation de base de React Router

Voici un exemple simple où React Router est utilisé pour définir trois routes : une page d'accueil, une page à propos et une page d'erreur 404 :

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

function Home() {
    return <h1>Bienvenue sur la page d'accueil</h1>;
}

function About() {
    return <h1>À propos</h1>;
}

function NotFound() {
    return <h1>Page non trouvée</h1>;
}

export default App;

Dans cet exemple :

• BrowserRouter enveloppe l'application pour activer la gestion des routes.
• Routes contient toutes les routes définies.
• Route associe chaque chemin à un composant spécifique.

Routes dynamiques et paramètres

React Router prend également en charge les routes dynamiques. Voici comment afficher des détails en fonction de l'ID dans l'URL :

import { useParams } from 'react-router-dom';

function UserProfile() {
    const { id } = useParams();

    return <h1>Profil de l'utilisateur {id}</h1>;
}

// Ajoutez la route suivante :
<Route path="/user/:id" element={<UserProfile />} />;

Le paramètre id est automatiquement extrait de l'URL grâce au hook useParams.

Gestion avancée des routes avec useLocation et useNavigate

React Router fournit des hooks puissants pour accéder aux informations de routage et naviguer dans l'application. Voici comment utiliser useLocation et useNavigate.

Utiliser useLocation pour accéder à l'URL actuelle

Le hook useLocation permet d'accéder à l'objet représentant l'URL actuelle, incluant le chemin, les paramètres de recherche et l'état.

import { useLocation } from 'react-router-dom';

function CurrentLocation() {
    const location = useLocation();

    return (
        <div>
            <h1>Votre localisation actuelle</h1>
            <p>Chemin : {location.pathname}</p>
            <p>Recherche : {location.search}</p>
            <p>État : {JSON.stringify(location.state)}</p>
        </div>
    );
}

Ce hook est utile pour :

• Vérifier le chemin actuel pour adapter l'affichage.
• Accéder à des paramètres passés dans l'état de navigation.

Utiliser useNavigate pour naviguer dynamiquement

Le hook useNavigate remplace useHistory et permet de rediriger les utilisateurs ou de naviguer dynamiquement entre les routes.

import { useNavigate } from 'react-router-dom';

function NavigationExample() {
    const navigate = useNavigate();

    const handleGoToProfile = () => {
        navigate('/profile', { state: { from: 'homepage' } });
    };

    return (
        <div>
            <button onClick={handleGoToProfile}>
                Aller au profil
            </button>
        </div>
    );
}

Ce hook est utile pour :

• Implémenter une redirection après une action réussie (connexion, formulaire soumis).
• Passer des données à la route suivante via l'état.

Bonnes pratiques

• Structurer les routes : Regroupez les routes dans un fichier dédié pour une meilleure lisibilité.
• Utiliser les redirections : Pour gérer les routes obsolètes ou protéger des pages.
• Charger les données dynamiquement : Combinez React Router avec des hooks comme useEffect pour récupérer les données nécessaires à chaque route.