Dans cette section, nous allons entreprendre un voyage pratique pour construire un site web d'entreprise en utilisant React Router. Ce projet vous donnera une expérience pratique dans la mise en œuvre du routage au sein d'une application React. Le site web se composera de trois pages : "Accueil", "À propos" et "Contacts". Chaque page aura sa propre URL, et nous explorerons comment configurer les routes pour elles.

Avant de plonger dans les détails, obtenons un aperçu du projet :

• Objectif du projet : Nous visons à créer un site web d'entreprise simple avec trois pages distinctes en utilisant React Router pour la navigation ;

• Structure des pages : Le site web aura les pages suivantes :

  • "Accueil" avec le chemin : /;

  • "À propos" avec le chemin : /about;

  • "Contacts" avec le chemin : /contacts.

• Composants React : Tous les composants React et styles pour ce projet sont prédéfinis, nous permettant de nous concentrer uniquement sur la fonctionnalité fournie par React Router ;

• Code Sandbox : Vous aurez accès à un Code Sandbox contenant le code complet de l'application. Nous vous encourageons à inspecter le code attentivement pour comprendre les concepts fondamentaux du routage.

L'illustration présentée ci-dessous affiche la fonctionnalité finale de l'application.

Voici le code initial sous forme de Code Sandbox :

Comment travailler avec Code Sandbox