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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://students.corentindesfarges.fr/lp-tais/tp-react-router-and-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.