6. Gérer les erreurs 404

Nous avons implémenté toutes les routes de notre application, et pourtant il y a encore une petit problème à corriger. C’est le cas où votre utilisateur saisie une url qui n’est pas prise en compte par vos routes. Par exemple, retournez dans votre application et tapez l’url « /pokemonz« . Votre application renverra une page vide avec une barre de navigation. Et c’est normal, puisque notre système de navigation n’est pas fait pour intercepter ce genre de routes, par contre c’est loin d’être l’idéal.

Ce que nous voudrions à la place, c’est intercepter toutes les routes qui ne sont pas gérées par notre application et afficher une page d’erreur avec une message plus explicite à l’utilisateur :

Pour cela, nous allons créer un composant PageNotFound qui aura pour rôle d’afficher un message d’erreur à l’utilisateur. Créez donc ce composant page-not-found.tsx dans le dossier pages :

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

const PageNotFound: FunctionComponent = () => {

  return (
    <div className="center">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/035.png" alt="Page non trouvée"/>
      <h1>Hey, cette page n'existe pas !</h1> 
      <Link to="/" className="waves-effect waves-teal btn-flat">
        Retourner à l'accueil
      </Link>
    </div>
  );
}

export default PageNotFound;

Ce composant n’a pas de logique propre, il s’agit juste d’un template qui sera affiché à l’utilisateur.

Il ne nous reste plus qu’à intercepter les routes qui ne sont pas prises en charge par notre application et de les rediriger vers ce composant. Rien n’est plus simple grâce au routeur de React, qui permet d’intercepter toutes les routes au sein de votre application, en ajoutant un élément Route, sans lui définir de path. Modifiez donc le composant App.tsx comme suit :

import React, { FunctionComponent } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import PokemonsList from './pages/pokemon-list';
import PokemonsDetail from './pages/pokemon-detail';
import PageNotFound from './pages/page-not-found';
 
const App: FunctionComponent = () => {
 
  return (
    <Router>
      <div>
      <nav> 
        <div className="nav-wrapper teal">
          <Link to="/" className="brand-logo center">Pokédex</Link>
        </div> 
      </nav>
      <Switch>
        <Route exact path="/" component={PokemonsList} />
        <Route exact path="/pokemons" component={PokemonsList} />
        <Route path="/pokemons/:id" component={PokemonsDetail} />
        <Route component={PageNotFound} />
      </Switch>
      </div>
    </Router>
  );
}
 
export default App;

Ainsi, toutes les routes qui ne sont pas interceptées par notre système de navigation seront redirigées vers le composant PageNotFound. Pensez donc à déclarer cette route en dernier dans votre tableau de routes, car si vous la mettez en premier, alors toutes les routes de votre application pointeront vers votre page d’erreur ! Ce n’est pas vraiment ce que souhaitent vos utilisateurs !

L’ordre dans lequel vous déclarez vos routes a une importance. Pour chaque url demandé par vos utilisateurs, le routeur de React commence par la route déclaré en premier pour voir si elle correspond, puis la deuxième, etc. Dès qu’il a fait une correspondance, il arrête de chercher et affiche le composant demandé. Attention à l’ordre dans lequel vous déclarez vos routes donc !

Essayer maintenant de lancer l’application, et entrez une url pouvant provoquer une erreur, comme « /pokemonz« . Vous devriez voir s’afficher notre composant PageNotFound.

Aussi, je tiens à m’excuser auprès de tous ceux qui déteste les Pokémons, et qui sont obligés de les supporter partout dans ce cours ! 🙂