TP : React, Router & API

Ce TP est a réalisé sur la base du précédent. Reprenez le même projet.

Mise en place minimaliste

• Un router devra régir toute la navigation de votre application (pas de <a href=...)

• Chaque exercice sera représenté par un composant

• Un menu, visible en permanence, permettra d'accéder à chaque exercice du TP précédent

• L'url d'accès à chaque exercice devra être du type : http://localhost:3000/exercice/1

Paramètres et API

Créez un nouveau composant Country, qui reprendra le code ci-dessous. Lisez-le bien, et assurez vous de l'avoir compris avant de continuer.

import React, { useEffect, useState } from "react";
import axios from "axios";

const Country = props => {
  const [countryFromUrl, setCountryFromUrl] = useState("");
  const [topLevelDomain, setTopLevelDomain] = useState("");
  const [capital, setCapital] = useState("");
  const [population, setPopulation] = useState(0);

  useEffect(() => {
    // TODO
  }, [props.match.params.name]);

  useEffect(() => {
    // TODO, appel à l'API https://restcountries.eu/rest/v2/name/[COUNTRY_NAME]
    // extraction et sauvergarde des données à afficher (voir render())
  }, [countryFromUrl]);

  return (
    <div>
      <h1>{countryFromUrl}</h1>
      Domaine web : <b>{topLevelDomain}</b>
      <br />
      Capitale : <b>{capital}</b>
      <br />
      Population : <b>{population}</b>
      <br />
    </div>
  );
};

export default Country;

L'objectif de ce composant est d'appeler l'API https://restcountries.eu/rest/v2/name/, afin de récupérer des informations (domaine web, capitale, et population).

Comme vous pouvez le voir ligne 12, nous récupérerons le nom du pays à rechercher dans l'url de notre application. Il faudra pour cela définir une route dans App.js, qui acceptera un paramètre. Vous ne devez pas définir plusieurs routes.

Il n'est pas nécessaire de modifier le menu, mais vous pouvez toutefois y ajouter les entrées suivantes :

<Link to="/country/France">France</Link>
<Link to="/country/Germany">Allemagne</Link>
<Link to="/country/Canada">Canada</Link>

Correction

https://codesandbox.io/s/tp-react-router-correction-r8b7s