←

Routing de l'application

L'application utilise React Router pour gérer la navigation côté client. La structure est organisée pour séparer la mise en page globale, la logique des pages et l'état global.

1. App.js : point d'entrée

App.js encapsule toute l'application avec plusieurs composants globaux :

💡 Cette organisation centralise la configuration globale et sépare clairement les responsabilités.

2. AppContent et Layout

AppContent définit les routes principales : - La route / correspond à la page Login et n'utilise pas Layout. - Toutes les autres routes passent par le Layout.

Layout est un composant qui encapsule toutes les pages connectées et fournit la structure globale :

Le Layout permet de réutiliser la mise en page sur toutes les pages sans répéter le code et de conditionner l'affichage selon la route.

3. AppRoutes : centralisation des pages

AppRoutes.js contient toutes les pages de l'application après connexion. Chaque route pointe vers un composant de page spécifique et certaines routes utilisent des paramètres dynamiques.

💡 L'intérêt d'AppRoutes est de centraliser toutes les pages et de faciliter l'ajout ou la modification d'une route sans toucher au layout global.

4. Navigation et récupération de paramètres

Pour naviguer dans l'application, nous utilisons les outils de React Router :

Cette combinaison permet de gérer la navigation interne et la récupération dynamique des données de manière propre et réactive. 

  // Exemple de récupération de paramètre dynamique
  import { useParams } from 'react-router-dom';
  
  function TicketPage() {
    const { ticketId } = useParams();
    // utiliser ticketId pour récupérer les données du ticket
  }
    
  // Exemple de navigation automatique
  import { useNavigate } from 'react-router-dom';
  
  function SubmitForm() {
    const navigate = useNavigate();
  
    const handleSubmit = () => {
      // après la validation
      navigate('/tickets');
    };
  }

5. Bonnes pratiques