15.4 Afficher des Pages selon l’Adresse Visitée en React

Afficher Pages Adresse React dans vos projets peut considérablement améliorer l’expérience utilisateur et optimiser la navigation au sein de votre application. Voici un guide détaillé qui vous apprendra à configurer le routage dans une application React en utilisant des outils modernes comme React Router.

Introduction au Routage avec React

Le routage en React est géré par une bibliothèque externe appelée React Router, qui permet de gérer les transitions de pages dans une application web monopage (SPA). Cela garantit que l’application reste fluide sans le besoin de recharger la page à chaque changement de vue. Pour plus d’informations sur les différences entre les SPAs et les MPAs, consultez cet article.

Installation de React Router

Pour commencer à utiliser React Router dans votre projet, vous devez d’abord l’installer. Utilisez la commande suivante dans votre terminal :

npm install react-router-dom

Configurer le Routeur

Une fois installé, configurez le routeur dans votre application. Voici un exemple basique de configuration d’un routeur avec plusieurs pages :

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 Contact from './components/Contact';

function App() {
  return (
    
      
        
        
        
      
    
  );
}

export default App;

Avec des Liens de Navigation

React Router fournit aussi un composant Link qui fonctionne comme une balise HTML a mais sans forcer le rechargement de la page. Intégrez les liens de navigation comme ceci :

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

function Navigation() {
  return (
    
  );
}

export default Navigation;

Utiliser les Paramètres de Routage

L’une des puissantes fonctionnalités de React Router est la capacité de passer des paramètres à travers les URL. Voici comment utiliser les paramètres dynamiques :

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

function Profile() {
  let { username } = useParams();
  return 
Profile de {username}
;
}

// Configuration du routeur pour utiliser le paramètre dynamique
function App() {
  return (
    
      
        
        {/* autres routes */}
      
    
  );
}

export default App;

Gestion des Routes Non Trouvées

Il est également important de gérer les routes non trouvées pour améliorer l’expérience utilisateur. Vous pouvez créer une page 404 de cette manière :

function NotFound() {
  return 
404 - Page non trouvée
;
}

// Ajout de la route 404 à la fin de votre liste de routes

  {/* autres routes */}
  

Conclusion

En utilisant React Router, vous pouvez créer des applications monopage avec navigation fluide et expérience utilisateur améliorée. Qu’il s’agisse de passer des paramètres via l’URL ou de gérer des routes non trouvées, cette bibliothèque simplifie considérablement le processus. Pour approfondir vos connaissances, explorez le site officiel de React Router et expérimentez avec des projets réels pour acquérir de l’expérience pratique. Si vous vous intéressez à l’utilisation de JavaScript dans React, consultez notre guide JSX, ou lisez sur d’autres sujets comme maîtriser les contenus à afficher avec les conditions ternaires.