Pourquoi gérer les erreurs 404 dans une SPA ?

Même dans une Single Page Application (SPA) où la navigation se fait côté client, les utilisateurs peuvent toujours rencontrer des situations où l'URL demandée ne correspond à aucune des routes que vous avez définies. Cela peut arriver s'ils tapent une URL incorrecte, suivent un lien obsolète ou cassé, ou tentent d'accéder à une ressource qui n'existe plus.

Par défaut, si React Router ne trouve aucune `` correspondant à l'URL actuelle dans un composant ``, il ne rendra tout simplement rien dans cet `` ou cette section. Cela peut aboutir à une page partiellement chargée ou à une section vide, ce qui est déroutant pour l'utilisateur et ne constitue pas une bonne expérience.

Il est donc essentiel de mettre en place une gestion spécifique pour ces cas "non trouvés" (Not Found), généralement en affichant une page d'erreur 404 personnalisée. Cette page peut informer l'utilisateur que le contenu demandé n'existe pas et lui proposer des options pour revenir à une partie valide de l'application (comme la page d'accueil).

La route "catch-all" avec `path="*"`

React Router fournit un moyen simple et efficace de gérer les cas 404 en utilisant une route spéciale dite "catch-all" (fourre-tout). Cette route utilise le caractère générique `*` comme valeur pour sa prop `path`.

Une `` correspondra à n'importe quelle URL qui n'a pas déjà été interceptée par une route plus spécifique définie avant elle dans le même bloc ``. C'est pourquoi il est crucial de placer cette route 404 en dernier dans la liste des routes au sein d'un ``.

Voici comment l'intégrer dans la configuration des routes :

// Dans App.js ou votre fichier de configuration des routes
import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
} from 'react-router-dom';

// ... imports des autres pages
import PageNonTrouvee from './pages/PageNonTrouvee'; // Votre composant 404

function App() {
  return (
    
      
        {/* Routes spécifiques */}
        } />
        } />
        } />

        {/* ... autres routes spécifiques ... */}

        {/* La route 404 doit être la dernière */}
        } />
      
    
  );
}

export default App;

Avec cette configuration, si l'utilisateur navigue vers `/`, `/a-propos`, ou `/produits/123`, les routes correspondantes seront rendues. Mais s'il navigue vers `/page-inexistante`, `/produits/abc/xyz` ou toute autre URL qui ne correspond à aucune des routes précédentes, c'est la route `path="*"` qui sera sélectionnée, et le composant `PageNonTrouvee` sera affiché.

Créer un composant `PageNonTrouvee`

Le composant que vous associez à la route `path="*"` est un composant React standard. Il doit fournir un message clair à l'utilisateur et, idéalement, un moyen de revenir à une partie connue de l'application.

// pages/PageNonTrouvee.js
import React from 'react';
import { Link } from 'react-router-dom';

function PageNonTrouvee() {
  return (
    

      
Erreur 404
      
Désolé, la page que vous recherchez n'existe pas.
      
      

        Vous pouvez retourner à la 
        page d'accueil.
      
    
  );
}

export default PageNonTrouvee;

Ce composant simple affiche un titre, un message d'erreur, éventuellement une illustration, et un lien `` permettant à l'utilisateur de retourner facilement à la page d'accueil.

Routes imbriquées et 404

Il est important de noter que la portée de la route `path="*"` est limitée au bloc `` dans lequel elle est définie. Si vous avez des routes imbriquées, vous pourriez vouloir définir une route 404 spécifique pour une section particulière.

Par exemple, si vous avez une section `/admin` avec ses propres routes imbriquées, vous pourriez vouloir une page 404 spécifique à l'administration si l'utilisateur tape `/admin/page-inconnue`.

}>
  } />
  } />
  {/* 404 spécifique à la section admin */}
  } />


{/* 404 globale pour le reste de l'application */}
} />

Dans ce cas, `/admin/users` afficherait `AdminUsers` dans `LayoutAdmin`. `/admin/autre` afficherait `AdminPageNonTrouvee` dans `LayoutAdmin`. Et `/page-totalement-inconnue` afficherait la `PageNonTrouvee` globale.

La gestion des erreurs 404 avec `path="*"` est une pratique standard et essentielle dans React Router pour offrir une expérience utilisateur cohérente et professionnelle, même lorsque la navigation ne se déroule pas comme prévu.