Dans cette section, nous entreprendrons un parcours pratique pour construire un site web d'entreprise en utilisant React Router. Ce projet vous offrira une expérience concrète dans la mise en œuvre du routage au sein d'une application React. Le site web comportera trois pages : « Home », « About » et « Contacts ». Chaque page disposera de sa propre URL, et nous examinerons comment configurer les routes pour chacune d'elles.

Avant d’entrer dans les détails, examinons un aperçu du projet :

• Objectif du projet : Création d’un site web d’entreprise simple avec trois pages distinctes en utilisant React Router pour la navigation ;
• Structure des pages : Le site web comprendra les pages suivantes :
  • « Home » avec le chemin : /;
  • « About » avec le chemin : /about;
  • « Contacts » avec le chemin : /contacts.
• Composants React : Tous les composants React et les styles pour ce projet sont prédéfinis, ce qui nous permet de nous concentrer uniquement sur la fonctionnalité offerte par React Router ;
• Code Sandbox : Un Code Sandbox contenant le code complet de l’application sera mis à votre disposition. Il est recommandé d’examiner attentivement le code afin de bien comprendre les concepts fondamentaux du routage.

L’illustration ci-dessous présente la fonctionnalité finale de l’application.

Voici le code initial sous forme de Code Sandbox :

Comment utiliser Code Sandbox