ReactJS - BrowserRouter : Guide de débutant pour la gestion des routes dans React

Bonjour à tous, développeurs React en herbe ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de la gestion des routes dans les applications React. Ne vous inquiétez pas si vous êtes nouveau dans le monde de la programmation ; je serai votre guide attentionné, expliquant tout étape par étape. Alors, prenez une tasse de café et plongez avec moi !

ReactJS - BrowserRouter

Concepts de Routage

Qu'est-ce que le Routage ?

Imaginez que vous êtes dans une grande bibliothèque. Vous cherchez un livre spécifique, mais vous ne savez pas où il se trouve. C'est là que le catalogue de la bibliothèque devient utile. Il vous indique exactement sur quel rayon chercher. Dans les applications web, le routage fonctionne de manière similaire. C'est comme une carte qui indique à votre application quel composant afficher en fonction de l'URL.

Pourquoi avons-nous besoin de Routage ?

Disons que vous construisez un site personnel avec différentes pages : Accueil, À propos et Contact. Sans routage, vous devriez manuellement afficher et masquer des composants en fonction des actions de l'utilisateur. Cela est fastidieux et sujet aux erreurs. Le routage automatisé de ce processus rend votre application plus organisée et plus conviviale.

Présentation de BrowserRouter

Dans le monde de React, nous avons un outil fantastique appelé BrowserRouter. Il fait partie de la bibliothèque react-router-dom et nous aide à implémenter le routage dans nos applications React. Pensez à lui comme le bibliothécaire personnel de votre application, toujours prêt à guider les utilisateurs vers le bon "livre" (ou, dans notre cas, composant).

Comment Appliquer les Routers

Maintenant que nous comprenons le concept, mettons les mains dans le code !

Étape 1 : Installation

Premièrement, nous devons installer le paquet react-router-dom. Ouvrez votre terminal et exécutez :

npm install react-router-dom

Étape 2 : Configuration de BrowserRouter

Commençons par envelopper notre composant principal App avec BrowserRouter. Voici comment faire :

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

Dans cet exemple, nous importons BrowserRouter et le renommons en Router pour simplifier. Nous enveloppons ensuite notre composant App avec Router. Cela configure le contexte de routage pour toute notre application.

Étape 3 : Définition des Routes

Maintenant, définissons quelques routes dans notre composant App :

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Reprenons cela :

Nous importons Route et Switch de react-router-dom.
Switch assure que seulement une route est rendue à la fois.
Chaque composant Route définit une correspondance entre un chemin d'URL et un composant React.
Le prop exact sur la route de l'accueil assure qu'elle ne correspond qu'à l'URL exacte "/".

Étape 4 : Création de la Navigation

Maintenant, ajoutons une navigation à notre application :

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

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Accueil</Link></li>
<li><Link to="/about">À propos</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);

export default Navigation;

Ici, nous utilisons le composant Link de react-router-dom. Il fonctionne comme un tag <a>, mais empêche la page de recharger lors de la navigation.

Étape 5 : Rassembler Tout

Metttons à jour notre composant App pour inclure la navigation :

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Et voilà ! Vous avez maintenant une application React de base avec le routage configuré.

Techniques de Routage Avancées

Maintenant que nous avons couvert les bases, regardons quelques techniques plus avancées :

1. Paramètres d'URL

Parfois, vous voulez transmettre des données via l'URL. Par exemple, une page de profil utilisateur :

<Route path="/user/:id" component={UserProfile} />

Dans votre composant UserProfile, vous pouvez accéder au paramètre id comme ceci :

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

const UserProfile = () => {
let { id } = useParams();
return <h1>Profil utilisateur pour l'utilisateur {id}</h1>;
};

2. Routes imbriquées

Vous pouvez imbriquer des routes à l'intérieur des composants. Cela est utile pour des layouts complexes :

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Utilisateurs</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. Navigation Programmatique

Parfois, vous souhaitez naviguer de manière programmatique, comme après la soumission d'un formulaire :

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

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... logique de connexion
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* champs du formulaire */}
</form>
);
};

Tableau des Méthodes de Routage

Voici un tableau pratique résumant les principales méthodes de routage que nous avons discutées :

Méthode	Objectif	Exemple
`<BrowserRouter>`	Enveloppe l'application pour activer le routage	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	Définit une route	`<Route path="/about" component={About} />`
`<Switch>`	Assure que seule une route est rendue	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	Crée un lien vers une route	`<Link to="/about">À propos</Link>`
`useParams()`	Accède aux paramètres d'URL	`let { id } = useParams();`
`useHistory()`	Navigation programmatique	`history.push('/dashboard');`

Et voilà, amis ! Nous avons fait le tour des bases du routage dans React en utilisant BrowserRouter. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts dans vos propres projets.

Bonne programmation, et puissent vos routes toujours vous conduire au bon composant !

Credits: Image by storyset