logo oujood
🔍

Routage Avancé avec React Router

OUJOOD.COM

Introduction

Dans ce tutoriel, nous allons explorer les fonctionnalités avancées de React Router, la bibliothèque de routage la plus populaire pour les applications React. Nous aborderons des concepts tels que les routes dynamiques, la navigation programmée, la protection des routes avec authentification, et le passage de props entre les routes. Ces techniques vous permettront de créer des applications React plus robustes et interactives.

Configuration de base de React Router

Avant de plonger dans les fonctionnalités avancées, commençons par une configuration de base de React Router. Voici comment configurer un routeur simple dans une application React :

Le code qui suivra est un composant principal React (App) qui configure un système de routage dans l'application. Ce routage permet à l'utilisateur de naviguer entre différentes pages (composants) de l'application.

Voici une explication détaillée du code React que vous avez partagé, qui met en œuvre un système de routage à l'aide de react-router-dom :

Explication du code :

Le code que vous avez partagé est un composant principal React (App) qui configure un système de routage dans l'application. Ce routage permet à l'utilisateur de naviguer entre différentes pages (composants) de l'application.

1. Importation des bibliothèques et des composants :

  • React : Importation de la bibliothèque React pour utiliser les composants.
  • BrowserRouter as Router : Composant qui permet de configurer le routage au niveau de l'application en utilisant l'API du navigateur.
  • Route : Composant qui définit une règle de routage pour une URL donnée.
  • Switch : Permet de rendre uniquement la première route qui correspond à l'URL actuelle, empêchant ainsi plusieurs composants d’être rendus en même temps.
  • Composants (Home, About, NotFound) : Ce sont les composants associés à des routes spécifiques (ex: /, /about).

2. Composant App :

  • Le composant App est enveloppé dans un <Router>, qui permet d'utiliser les fonctionnalités de routage dans toute l'application.
  • À l'intérieur du <Router>, il y a un <Switch>, qui permet de rendre uniquement la première route qui correspond à l'URL courante.
  • Le <Route exact path="/" component={Home} /> rend le composant Home lorsque l'utilisateur est sur la racine de l'application (/).
  • Le <Route path="/about" component={About} /> rend le composant About lorsque l'utilisateur est sur la page /about.
  • Le <Route component={NotFound} /> est utilisé pour afficher une page 404 (composant NotFound) pour toute autre URL qui ne correspond à aucune des routes définies.

Code React complet :

📋 Copier le code

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

function App() {
return (
<Router>
<Switch>
	<Route exact path="/" component={Home} />
	<Route path="/about" component={About} />
	<Route component={NotFound} />
</Switch>
</Router>
);
}

export default App;

Plus d'éxplication du code :

  • <Router> : Le composant principal qui permet de gérer le routage dans l'application. Il garde une trace de l'URL actuelle et rend les composants correspondants aux différentes routes définies dans l'application.
  • <Switch> : Ce composant s'assure qu'une seule route est rendue à la fois, c’est donc un moyen de restreindre le rendu à une seule route active. Si plusieurs routes correspondent à une URL, seul le premier élément <Route> qui correspond sera rendu.
  • <Route exact path="/" component={Home} /> : Cette route rend le composant Home lorsque l'URL est exactement / (la page d'accueil).
  • <Route path="/about" component={About} /> : Cette route rend le composant About lorsque l'URL correspond à /about.
  • <Route component={NotFound} /> : Cette route sert à afficher un composant NotFound pour toute URL qui ne correspond à aucune des routes définies précédemment (page 404).

Points importants :

  • Exactitude (exact) : Utilisation de la prop exact sur la route / pour éviter qu'elle ne corresponde à toutes les autres URL. Sans cela, elle serait également correspondante à toutes les autres routes qui commencent par /, comme /about.
  • Gestion de l'erreur 404 : Le NotFound est utilisé comme un fallback pour les pages non définies. Cela permet de personnaliser le message d'erreur lorsque l'utilisateur entre une URL incorrecte.

Améliorations possibles :

  • Composant de chargement personnalisé : Vous pouvez remplacer le simple message "Chargement..." par un composant de chargement plus visuel (comme un spinner).
  • Pagination : Si l'API retourne beaucoup de données, vous pouvez envisager d'ajouter une pagination ou un chargement infini pour gérer l'affichage des données.

Routes dynamiques

Les routes dynamiques permettent de créer des URL qui dépendent de paramètres variables. Par exemple, vous pouvez avoir une URL comme /user/123 où 123 est l'ID d'un utilisateur. Voici comment implémenter une route dynamique :

📋 Copier le code

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useParams } from 'react-router-dom';

function UserProfile() {
// Récupérer le paramètre dynamique de l'URL
const { userId } = useParams();

return (
<div>
<h1>Profil de l'utilisateur {userId}</h1>
<p>Ceci est le profil de l'utilisateur avec l'ID {userId}.</p>
</div>
);
}

function App() {
return (
<Router>
<Switch>
	<Route path="/user/:userId" component={UserProfile} />
</Switch>
</Router>
);
}

export default App;

Explication du code :

  • useParams : Ce hook permet de récupérer les paramètres dynamiques de l'URL. Ici, userId est extrait de l'URL.
  • :userId : Le deux-points (:) indique que userId est un paramètre dynamique.

Navigation programmée

La navigation programmée permet de rediriger l'utilisateur vers une autre route en réponse à un événement, comme la soumission d'un formulaire ou la connexion d'un utilisateur. Voici un exemple :

📋 Copier le code

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

function LoginButton() {
const history = useHistory();

const handleLogin = () => {
// Simuler une connexion réussie
const isLoggedIn = true;

if (isLoggedIn) {
// Rediriger vers le tableau de bord
history.push('/dashboard');
}
};

return (
<button onClick={handleLogin}>Se connecter</button>
);
}

export default LoginButton;

Explication du code :

  • useHistory : Ce hook permet d'accéder à l'objet history, qui est utilisé pour naviguer programmatiquement.
  • history.push : Redirige l'utilisateur vers une nouvelle route. Ici, l'utilisateur est redirigé vers /dashboard après une connexion réussie.

Protection des routes avec authentification

Dans de nombreuses applications, certaines routes doivent être accessibles uniquement aux utilisateurs authentifiés. Voici comment protéger une route avec React Router :

📋 Copier le code

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

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
return (
<Route
{...rest}
render={props =>
	isAuthenticated ? (
		<Component {...props} />
	) : (
		<Redirect to="/login" />
	)
}
/>
);
}

export default PrivateRoute;

Explication du code :

  • PrivateRoute : Ce composant personnalisé vérifie si l'utilisateur est authentifié avant de rendre la route demandée.
  • isAuthenticated : Une prop booléenne qui indique si l'utilisateur est connecté.
  • Redirect : Redirige l'utilisateur vers la page de connexion s'il n'est pas authentifié.

Passage de props entre les routes

Parfois, vous devez passer des props supplémentaires à un composant de route. Voici comment faire :

📋 Copier le code

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

function Greeting({ name }) {
return <h1>Bonjour, {name} !</h1>;
}

function App() {
return (
<Route
path="/greet/:name"
render={props => <Greeting name={props.match.params.name} />}
/>
);
}

export default App;

Explication du code :

  • render : Au lieu d'utiliser component, nous utilisons render pour passer des props supplémentaires au composant.
  • props.match.params.name : Récupère le paramètre dynamique name de l'URL.

Conclusion

Vous avez maintenant une solide compréhension des fonctionnalités avancées de React Router. Que ce soit pour créer des routes dynamiques, protéger des routes avec authentification, ou naviguer programmatiquement, ces techniques vous permettront de créer des applications React plus robustes et interactives.

Pour continuer votre apprentissage, découvrez comment gérer l'état global avec Context API dans le chapitre suivant : Context API et Gestion Globale d'État.


Cours precedent   Sommaire     Cours suivant