Bienvenue dans notre série React ! Dans les articles précédents, nous avons abordé des concepts essentiels tels que les composants, l'état, les accessoires et la gestion des événements. Il est maintenant temps d'explorer le routage dans les applications React à l'aide de React Router. Le routage vous permet de naviguer entre différentes vues ou composants au sein de votre application, créant ainsi une expérience utilisateur transparente ?.

Qu’est-ce que React Router ?

React Router est une bibliothèque puissante qui permet le routage dans les applications React. Il vous permet de définir plusieurs itinéraires dans votre application et de restituer des composants spécifiques en fonction du chemin de l'URL. Cette fonctionnalité est cruciale pour créer des applications monopage (SPA) où la navigation ne nécessite pas de rechargement d'une page complète.

Installation du routeur React
Pour commencer, vous devrez installer React Router. Vous pouvez le faire en utilisant npm :

npm install react-router-dom

Configuration du routage de base

Configurons une application simple avec plusieurs itinéraires. Nous allons créer une application avec une page d'accueil, une page à propos et une page de contact.

1. Créer des composants de base
Tout d’abord, créez trois composants : Accueil, À propos et Contact.

// Home.js
import React from 'react';

const Home = () => {
    return 
Home Page
;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return 
About Page
;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return 
Contact Page
;
};

export default Contact;

2. Configurer le routeur
Maintenant, configurons le routeur dans votre fichier d'application principal, généralement App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        
    );
};

export default App;

Explication:

• Router : le composant BrowserRouter enveloppe l'intégralité de l'application, permettant le routage.
• Link : le composant Link est utilisé pour créer des liens de navigation qui modifient l'URL sans recharger la page.
• Route : le composant Route définit un chemin et le composant à restituer lorsque le chemin correspond.
• Switch : le composant Switch garantit qu'une seule route est rendue à la fois.

Navigation entre les pages
Une fois la configuration terminée, vous pouvez désormais naviguer entre les pages Accueil, À propos et Contact en cliquant sur les liens dans le menu de navigation. React Router gérera les modifications d'URL et affichera le composant approprié sans actualiser la page.

Paramètres d'itinéraire
Vous pouvez également définir des itinéraires avec des paramètres, vous permettant de transmettre des données dynamiques. Par exemple, créons un composant Utilisateur qui affiche les informations utilisateur en fonction de l'ID utilisateur dans l'URL.

1. Créer le composant utilisateur
Utilisateur.js :

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

const User = () => {
    const { userId } = useParams();
    return 
User ID: {userId}
;
};

export default User;

2. Mettre à jour le routeur
Ajoutez une route pour le composant User dans votre App.js :

Routes imbriquées

React Router prend également en charge les routes imbriquées, qui vous permettent de restituer les routes enfants au sein d'un composant parent. Ceci est utile pour créer des mises en page complexes.

Exemple d'itinéraires imbriqués :

1. Créez un composant Dashboard avec des itinéraires imbriqués :

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Settings from './Settings';
import Profile from './Profile';

const Dashboard = () => {
    return (
        

            
Dashboard
            
    );
};

export default Dashboard;

1. Mettez à jour votre App.js pour inclure l'itinéraire du tableau de bord :

maintenant, en accédant à /dashboard/profile ou /dashboard/settings, les composants respectifs seront affichés dans le tableau de bord.

Dans cet article, nous avons exploré comment implémenter le routage dans une application React à l'aide de React Router. Nous avons abordé la configuration d'un routage de base, la navigation entre les pages, l'utilisation des paramètres d'itinéraire et la création d'itinéraires imbriqués.

Grâce à ces concepts, vous pouvez créer un système de navigation structuré pour vos applications React, améliorant l'expérience utilisateur et permettant un rendu de contenu dynamique.

Dans le prochain article, nous approfondirons l'utilisation de React Hooks, en nous concentrant sur useEffect et sur la façon dont il peut gérer les effets secondaires dans les composants fonctionnels. Restez à l'écoute!