TP : React, Router & API
Ce TP est a réalisé sur la base du précédent. Reprenez le même projet.
- 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
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>
Last modified 2yr ago