4. Créer les routes de notre application

Pour commencer, nous devons reprendre le template de notre composant racine et le modifier. En effet, c’est le composant racine qui sera chargé de gérer les routes de notre application, avec l’aide du router de React. Le code du composant App.tsx ressemble à ceci pour le moment :

import React, { FunctionComponent } from 'react';
import PokemonsList from './pages/pokemon-list';

const App: FunctionComponent = () => {
  return (
  <PokemonsList />
  );
}

export default App;

Ce que nous voulons faire, c’est remplacer l’affichage de la liste des pokémons « en dur », par une gestion de l’affichage plus dynamique, en fonction de la route sur laquelle se trouve l’utilisateur. Pour garder une cohérence au niveau de l’affichage, nous allons également rajouter une barre de navigation en haut de toutes les pages, afin de ne pas perdre l’utilisateur lorsqu’il naviguera dans notre application.

Voici à quoi ressemble désormais notre composant App.tsx, après avoir ajouté une barre de navigation et la gestion des routes :

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';

const App: FunctionComponent = () => {

  return (
    <Router>
      <div>
      {/* La barre de navigation, commune à toutes les pages */}
      <nav> 
        <div className="nav-wrapper teal">
          <Link to="/" className="brand-logo center">Pokédex</Link>
        </div> 
      </nav>
      {/* Le système de gestion des routes de notre application */}
      <Switch>
        <Route exact path="/" component={PokemonsList} />
        <Route exact path="/pokemons" component={PokemonsList} />
        <Route path="/pokemons/:id" component={PokemonsDetail} />
      </Switch>
      </div>
    </Router>
  );
}

export default App;

Concernant notre système de navigation, nous avons commencé par importer toute une série de nouveaux éléments à la ligne 2. L’élément Router permet de mettre en place le système de navigation, l’élément Switch permet d’afficher le contenu d’une seule route à la fois, et enfin Route permet de décrire chaque route de votre application.

Ensuite, de la ligne 18 à 22, on décrit les routes de notre application, et nous avons trois au total. Les routes « / » et « /pokemons » sont identiques et redirigent vers la liste des pokémons, mais cela permet de gérer le cas de la route par défaut. Et la route « /pokemons/:id » est une route avec un paramètre id, qui sera injectée dans notre composant PokemonDetail que nous avons développé précédemment. Les routes prennent deux props obligatoirement : un chemin path, et un composant associé component. L’option exact que nous utilisons permet de spécifier que l’url doit correspondre exactement au chemin indiqué.

Aussi, nous avons ajouté au-dessus de l’élément Switch une barre de navigation, de la ligne 12à 16. Comme cette barre de navigation n’est pas dans la balise Switch, elle sera présente quelque soit la route sur laquelle nous nous trouvons. C’est-à-dire sur toute les pages de notre application, et c’est bien ce que nous voulons. 😉

Maintenant, lorsque nous naviguerons dans notre application, le template des composants parcourus sera injecté immédiatement au sein de la balise Switch. Par exemple, si je me rends sur l’url /pokemons, alors le template du composant pokemon-list.tsx sera injecté dans la balise <Switch>.

D’ailleurs, essayé par vous-même d’accéder aux différentes routes de notre application :

  • « /pokemons » et « / » : Ces deux routes affichent bien la liste de nos pokémons.
  • « /pokemons/4 » : Affiche le pokémon avec l’identifiant n°4, en l’occurence il s’agit de Aspicot !
  • « /pokemons/33 » : Affiche la page ci-dessous avec le message « Aucun pokémon à afficher !« , car il n’y a pas de pokémon avec un identifiant « 33 » dans notre application.
La page affiché si l’identifiant du pokémon à afficher n’existe pas.

Nous avons bien implémenté un système de navigation fonctionnel dans notre application. Nous sommes prêt à passer à la suite !

Essayer de vous rendre sur une url que nous n’avons pas prise en compte avec nos routes. Par exemple, la route « /pokemonz« . Vous verrez que rien ne s’affiche en dehors de la barre de navigation, car cette route n’existe pas pour notre routeur. Nous verrons prochainement comment gérer ce genre de route, en implémentant une route par défaut.