React Router : concepts et guide pratique (partie 1)

Guide ultime de React Router : concepts et guide pratique

Présentation

Le routage est une fonctionnalité essentielle dans toute application Web moderne. Il permet aux utilisateurs de naviguer de manière transparente entre différentes sections ou pages, créant ainsi une expérience fluide et interactive. Dans React, ceci est réalisé à l'aide de React Router, une bibliothèque puissante conçue pour gérer le routage dans les applications à page unique (SPA).

React Router simplifie le processus de création de routes dynamiques et imbriquées, de gestion des paramètres d'URL, de mise en œuvre de routes protégées et bien plus encore. Dans ce guide complet, nous explorerons tous les aspects de React Router, en décomposant ses concepts étape par étape et en les mettant en œuvre avec des exemples pratiques.

---

Qu'est-ce que React Router ?

React Router est une bibliothèque déclarative basée sur des composants pour gérer le routage dans les applications React. Il utilise une approche moderne pour mapper les URL aux composants, permettant aux développeurs de créer facilement des SPA évolutifs et dynamiques.

Principales fonctionnalités de React Router

1. Routage déclaratif : définissez des itinéraires en tant que composants, ce qui rend le système de routage facile à comprendre et à maintenir.
2. Routage dynamique : gérez les paramètres dynamiques dans les URL comme /user/:id pour créer des itinéraires flexibles et réutilisables.
3. Itinéraires imbriqués : organisez vos itinéraires de manière hiérarchique, permettant ainsi les relations parent-enfant.
4. Routes protégées : sécurisez des routes spécifiques derrière l'authentification ou l'autorisation.
5. Navigation programmatique : naviguez entre les pages par programmation en fonction des actions de l'utilisateur.
6. Prise en charge de l'historique du navigateur : synchronisation avec la navigation du navigateur, y compris les actions avant, arrière et d'actualisation.

---

Installation de React Router

Avant de commencer, configurons React Router dans votre projet. Installez la bibliothèque en utilisant npm ou Yarn :

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Une fois installé, vous êtes prêt à intégrer React Router dans votre application.

---

Concepts de base de React Router

React Router s'articule autour de quelques concepts de base qui constituent la base de son système de routage. Décomposons-les étape par étape.

---

1. NavigateurRouter et composants du routeur

Au niveau supérieur de votre application React, vous devez tout envelopper dans un Routeur. React Router propose plusieurs types de routeurs, mais le plus courant est BrowserRouter, qui utilise l'API d'historique du navigateur pour gérer la navigation.

Points clés sur BrowserRouter

• Il fournit le contexte requis pour le routage.
• Il écoute les modifications apportées à l'URL du navigateur et restitue les composants en conséquence.
• D'autres types de routeurs, comme HashRouter, utilisent un hachage (#) dans l'URL pour la navigation, mais BrowserRouter est plus couramment utilisé dans les applications modernes.

Comment utiliser BrowserRouter

Voici un exemple simple d'utilisation de BrowserRouter :

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Explication :

• Nous importons BrowserRouter depuis réagir-router-dom.
• Le composant BrowserRouter enveloppe l'intégralité de l'application pour activer la fonctionnalité de routage.

Remarque : Vous ne pouvez avoir qu'un seul BrowserRouter à la racine de votre application.

---

2. Itinéraires et composants d'itinéraire

Après avoir enveloppé votre application avec BrowserRouter, vous définissez des itinéraires individuels à l'aide des composants Routes et Route.

Que sont les itinéraires et les composants d'itinéraire ?

• Routes : Un conteneur pour toutes les routes de votre application.
• Route : Représente un seul itinéraire et définit :
  • path : le chemin de l'URL à rechercher.
  • element : Le composant React à restituer si le chemin correspond.

Exemple de base

import React from "react";
import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My App</h1>
                <p>Routing starts here!</p>
            </div>
        </BrowserRouter>
    );
}

export default App;

Explication :

1. path="/" : cette route correspond à l'URL racine (/) et restitue le composant Home.
2. path="/about" : correspond à /about et restitue le composant About.
3. Lorsque l'URL change (par exemple, /about), React Router restitue automatiquement le composant correspondant.

---

3. Composants Link et NavLink

Dans une application React, en utilisant le traditionnel Les balises de navigation amènent le navigateur à recharger la page. React Router fournit les composants Link et NavLink pour une navigation transparente sans actualisation de page.

Le composant Lien

Le composant Lien vous permet de naviguer entre les itinéraires en mettant à jour l'URL sans recharger la page.

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

function Home() {
    return <h1>Home Page</h1>;
}

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

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

export default App;

Explication :

• Lien remplace le traditionnel balises.
• Utilisez la prop to pour spécifier le chemin de destination.

Le composant NavLink

Le composant NavLink est similaire à Link, mais il vous permet de styliser le lien selon qu'il est actif ou non.

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

function Home() {
    return <h1>Home Page</h1>;
}

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

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    );
}

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

export default App;

Différence clé :

• Le composant NavLink ajoute un accessoire activeClassName (ou isActive) pour styliser les liens actifs.

---

Rassembler tout cela

Combinons ces concepts dans un petit exemple d'application :

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Sortie :

• Naviguez vers / pour voir la page d'accueil.
• Accédez à /about pour voir la page À propos.
• La page se met à jour dynamiquement sans rechargement.

---

Prochaines étapes

Dans cette partie, nous avons couvert les bases :

1. Qu'est-ce que React Router et comment il fonctionne.
2. Configuration de BrowserRouter.
3. Définir des itinéraires à l'aide de Routes et Route.
4. Ajout de la navigation avec Link et NavLink.

Dans le prochain article, nous explorerons :

• Routage imbriqué
• Itinéraires dynamiques
• Gestion des paramètres d'URL

Restez à l'écoute pour le prochain épisode de cette série Ultimate Guide to React Router !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!