React Router : Créez des Applications Multi-Pages avec React

1. Installation de React Router

Avant de commencer, vous devez installer React Router dans votre projet. La version la plus courante est react-router-dom, qui est spécialement conçue pour les applications web.

📋 Copier le code

npm install react-router-dom

Explication :

• npm install react-router-dom : Installe la bibliothèque react-router-dom dans votre projet React.

2. Configuration de Base avec React Router

Une fois React Router installé, vous pouvez configurer vos routes pour naviguer entre différentes pages de votre application. Voici un exemple simple :

📋 Copier le code

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

function Accueil() {
return <h2>Page d'accueil</h2>;
}

function APropos() {
return <h2>À propos</h2>;
}

function App() {
return (
<Router>
<div>
	<nav>
		<ul>
			<li>
				<Link to="/">Accueil</Link>
			</li>
			<li>
				<Link to="/a-propos">À propos</Link>
			</li>
		</ul>
	</nav>

	<Routes>
		<Route path="/" element={<Accueil />} />
		<Route path="/a-propos" element={<APropos />} />
	</Routes>
</div>
</Router>
);
}

export default App;

Explication détaillée :

1. import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; :
   • Nous importons les composants nécessaires depuis react-router-dom.
   • BrowserRouter est renommé en Router pour simplifier son utilisation.
   • Routes et Route sont utilisés pour définir les routes de l'application.
   • Link permet de naviguer entre les routes sans recharger la page.
2. function Accueil() { ... } et function APropos() { ... } :
   • Ces deux fonctions définissent des composants simples pour représenter les pages "Accueil" et "À propos".
3. <Router> :
   • Le composant Router enveloppe toute l'application pour activer la navigation basée sur des routes.
4. <Link to="/">Accueil</Link> et <Link to="/a-propos">À propos</Link> :
   • Les composants Link créent des liens vers les différentes routes de l'application.
   • to="/" et to="/a-propos" spécifient les chemins des routes.
5. <Routes> et <Route> :
   • Routes est un conteneur pour toutes les routes de l'application.
   • Route path="/" element={<Accueil />} : Cette ligne définit une route pour la page d'accueil.
   • Route path="/a-propos" element={<APropos />} : Cette ligne définit une route pour la page "À propos".

3. Navigation Dynamique avec des Paramètres

React Router permet également de naviguer dynamiquement en utilisant des paramètres dans les URL. Voici un exemple où nous affichons des détails utilisateur en fonction de leur ID :

📋 Copier le code

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

function Utilisateur() {
const { id } = useParams(); // Récupère l'ID depuis l'URL

return <h2>Détails de l'utilisateur {id}</h2>;
}

function App() {
return (
<Router>
<div>
	<nav>
		<ul>
			<li>
				<Link to="/">Accueil</Link>
			</li>
			<li>
				<Link to="/utilisateurs/1">Utilisateur 1</Link>
			</li>
			<li>
				<Link to="/utilisateurs/2">Utilisateur 2</Link>
			</li>
		</ul>
	</nav>

	<Routes>
		<Route path="/" element={<h2>Page d'accueil</h2>} />
		<Route path="/utilisateurs/:id" element={<Utilisateur />} />
	</Routes>
</div>
</Router>
);
}

export default App;

Explication détaillée :

1. const { id } = useParams(); :
   • La fonction useParams est un hook fourni par React Router qui permet de récupérer les paramètres de l'URL.
   • Ici, id représente l'ID de l'utilisateur extrait de l'URL.
2. <Link to="/utilisateurs/1">Utilisateur 1</Link></code> et <code><Link to="/utilisateurs/2">Utilisateur 2</Link> :
   • Ces liens naviguent vers des routes dynamiques contenant un paramètre (:id) dans l'URL.
3. <Route path="/utilisateurs/:id" element={<Utilisateur />} /> :
   • Cette route utilise un paramètre dynamique (:id) pour afficher des détails différents selon l'ID spécifié dans l'URL.

4. Gestion des Routes Non Trouvées

Il est important de gérer les cas où l'utilisateur accède à une route qui n'existe pas. React Router permet de définir une route par défaut pour ces situations. Voici un exemple :

📋 Copier le code

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

function Accueil() {
return <h2>Page d'accueil</h2>;
}

function PageNonTrouvee() {
return <h2>404 - Page non trouvée</h2>;
}

function App() {
return (
<Router>
<div>
	<nav>
		<ul>
			<li>
				<Link to="/">Accueil</Link>
			</li>
			<li>
				<Link to="/page-inexistante">Page inexistante</Link>
			</li>
		</ul>
	</nav>

	<Routes>
		<Route path="/" element={<Accueil />} />
		<Route path="*" element={<PageNonTrouvee />} />
	</Routes>
</div>
</Router>
);
}

export default App;

Explication détaillée :

1. <Route path="*" element={<PageNonTrouvee />} /> :
   • La route avec * comme chemin sert de route par défaut pour toutes les URLs non définies.
   • Lorsque l'utilisateur accède à une route inexistante, le composant PageNonTrouvee est affiché.

5. Meilleures Pratiques pour Utiliser React Router

Pour tirer pleinement parti de React Router dans vos projets, voici quelques conseils :

• Structurez vos routes de manière logique : Organisez vos routes de manière hiérarchique pour faciliter la maintenance.
• Gérez les erreurs 404 : Définissez toujours une route par défaut pour les URLs non trouvées.
• Utilisez des paramètres pour des routes dynamiques : Cela permet de rendre vos applications plus flexibles et interactives.

Conclusion

Vous avez maintenant appris à utiliser React Router pour ajouter des fonctionnalités de navigation à vos applications React. En configurant des routes statiques et dynamiques, ainsi qu'en gérant les erreurs 404, vous pouvez créer des interfaces utilisateur robustes et conviviales.

Prochain chapitre : React Memo