> For the complete documentation index, see [llms.txt](https://students.corentindesfarges.fr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://students.corentindesfarges.fr/lp-tais/tp-react-router-and-api.md).

# 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.

```jsx
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/](https://restcountries.eu/rest/v2/name/\[NOM_DU_PAYS]), 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 :

```jsx
<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>