Routage en React avec React Router

Le routage est un aspect essentiel du développement d'applications web, et React ne fait pas exception. Pour gérer la navigation entre différentes pages dans une application React, nous pouvons utiliser une bibliothèque appelée React Router. Dans cette section, nous allons explorer React Router et apprendre comment configurer les routes pour différentes pages, gérer la navigation, ainsi que la gestion d'une page 404.

Introduction à React Router

React Router est une bibliothèque populaire qui permet de gérer le routage dans les applications React. Elle fournit des composants qui permettent de définir des routes et de gérer la navigation entre ces routes. Avec React Router, nous pouvons créer des applications à pages multiples avec des URL distinctes pour chaque page, offrant ainsi une expérience utilisateur fluide et familière. Pour plus de détails sur les fonctionnalités offertes par React Router, vous pouvez consulter la documentation officielle de React Router (opens in a new tab).

Installation de React Router

Pour commencer à utiliser React Router, nous devons l'installer en utilisant npm ou yarn. Exécutez la commande suivante dans votre terminal :

npm install react-router-dom

Une fois l'installation terminée, vous pouvez importer les composants nécessaires dans votre application :

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'

• BrowserRouter : Composant qui englobe toute l'application et gère le routage en utilisant l'historique du navigateur.
• Route : Composant qui définit une route spécifique avec un chemin (path) et un composant à afficher lorsque le chemin correspond à l'URL actuelle.
• Link : Composant permettant de créer des liens de navigation entre différentes routes.
• Switch : Composant utilisé pour rendre uniquement la première route correspondante. Il évite d'afficher plusieurs composants correspondant à différentes routes.

Configuration des routes

La configuration des routes se fait généralement dans un composant dédié qui gère le routage, tel que Routeur.js. Nous utilisons le composant BrowserRouter pour envelopper notre application et définir le contexte de routage.

Voici un exemple de configuration de routes pour différentes pages :

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'
import Main from '../pages/Main'
import About from '../pages/About'
import NoMatch from './NoMatch'
import Navigation from '../layout/Navigation'
 
const Routeur = () => {
    return (
        <BrowserRouter>
            <Navigation />
            <Switch>
                <Route exact path='/' component={Main} />
                <Route path='/about' component={About} />
                <Route component={NoMatch} />
            </Switch>
        </BrowserRouter>
    )
}
 
export default Routeur

Dans cet exemple, nous avons configuré plusieurs routes pour différentes pages :

• La route avec le chemin exact "/" correspond à la page d'accueil et affiche le composant Main.
• La route avec le chemin "/about" correspond à la page "À propos" et affiche le composant About.
• La dernière route, sans chemin spécifié, correspond à toutes les autres URL qui ne correspondent à aucune des routes précédentes. Elle affiche le composant NoMatch, qui gère les pages introuvables (404).

Utilisation des liens de navigation

Pour permettre à l'utilisateur de naviguer entre les différentes pages de l'application, nous utilisons le composant Link de React Router.

Voici un exemple d'utilisation du composant Link :

import { Link } from 'react-router-dom'
 
const Navigation = () => {
    return (
        <nav>
            <ul>
                <li>
                    <Link to='/'>Accueil</Link>
                </li>
                <li>
                    <Link to='/about'>À propos</Link>
                </li>
            </ul>
        </nav>
    )
}
 
export default Navigation

Dans cet exemple, nous avons utilisé le composant Link pour créer des liens de navigation vers différentes pages. Lorsque l'utilisateur clique sur un lien, React Router gère la transition vers la page correspondante sans recharger complètement l'application.

Gestion d'une page 404

Il est courant d'inclure une page 404 personnalisée pour gérer les URL qui ne correspondent à aucune des routes définies. Pour cela, nous pouvons ajouter une route sans chemin spécifié, comme nous l'avons fait dans l'exemple de configuration des routes. Ensuite, nous pouvons créer un composant pour gérer la page 404 et l'afficher lorsque aucune autre route ne correspond à l'URL actuelle.

Voici un exemple de composant NoMatch pour gérer la page 404 :

import { Link, useLocation } from 'react-router-dom'
 
const NoMatch = () => {
    let location = useLocation()
 
    return (
        <div>
            <h2>Erreur 404</h2>
            <p>La page "{location.pathname}" est introuvable.</p>
            <Link to='/'>Retour à l'accueil</Link>
        </div>
    )
}
 
export default NoMatch

Dans cet exemple, nous utilisons le hook useLocation pour obtenir l'objet de l'emplacement (location), qui contient des informations sur l'URL actuelle. Ensuite, nous affichons un message d'erreur 404 avec le chemin de la page introuvable, et nous proposons un lien pour revenir à l'accueil.

Utilisation de la méthode history

En plus du composant Link, nous pouvons également utiliser la méthode history de React Router pour effectuer des navigations programmatiques. Par exemple, nous pouvons utiliser history.push() pour rediriger l'utilisateur vers une autre page après une action spécifique.

Voici un exemple d'utilisation de la méthode history :

import { useHistory } from 'react-router-dom'
 
const SomeComponent = () => {
    const history = useHistory()
 
    const redirectToAboutPage = () => {
        history.push('/about')
    }
 
    return <button onClick={redirectToAboutPage}>Aller à la page "À propos"</button>
}
 
export default SomeComponent

Dans cet exemple, nous utilisons le hook useHistory pour obtenir l'objet history. Lorsque l'utilisateur clique sur le bouton, la fonction redirectToAboutPage est appelée, ce qui utilise la méthode history.push() pour rediriger l'utilisateur vers la page "À propos".

Conclusion

Dans cette section, nous avons découvert React Router, une bibliothèque puissante pour gérer le routage dans les applications React. Nous avons appris à configurer les routes avec le composant BrowserRouter et le composant Route, ainsi qu'à gérer la navigation avec des liens grâce au composant Link. Nous avons également vu comment gérer une page 404 en utilisant React Router.

En utilisant React Router, vous pouvez créer des applications à pages multiples et offrir une expérience utilisateur fluide et intuitive. Continuez à explorer les fonctionnalités avancées de React Router pour répondre aux besoins spécifiques de vos projets React.

Note : L'exemple fourni dans cet exercice est simplifié pour illustrer les concepts de base de React Router. Dans un projet réel, vous pouvez étendre ces fonctionnalités en ajoutant des paramètres d'URL, des redirections, des gestionnaires d'événements, etc. N'hésitez pas à consulter la documentation officielle de React Router pour en savoir plus sur les fonctionnalités avancées.