Scribd
Importer
3 vues3 pages

API Et Routage

Le document explique comment consommer une API avec la méthode fetch() en JavaScript, en détaillant l'utilisation de promesses et la conversion des réponses en JSON. Il introduit également react-router-dom, une bibliothèque pour gérer la navigation dans les applications React à une seule page, en présentant ses concepts de base comme BrowserRouter, Routes et Link. Enfin, un exemple de code est fourni pour illustrer la mise en place d'une navigation fluide entre différentes pages sans rechargement complet.

Transféré par

wissal aqdim
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats ODT, PDF, TXT ou lisez en ligne sur Scribd
3 vues3 pages

API Et Routage

Le document explique comment consommer une API avec la méthode fetch() en JavaScript, en détaillant l'utilisation de promesses et la conversion des réponses en JSON. Il introduit également react-router-dom, une bibliothèque pour gérer la navigation dans les applications React à une seule page, en présentant ses concepts de base comme BrowserRouter, Routes et Link. Enfin, un exemple de code est fourni pour illustrer la mise en place d'une navigation fluide entre différentes pages sans rechargement complet.

Transféré par

wissal aqdim
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats ODT, PDF, TXT ou lisez en ligne sur Scribd

Consommation d’une API avec la méthode fetch

la méthode fetch() prend un argument unique obligatoire représentant le


chemin de la ressource qu’on souhaite récupérer . La méthode fetch()
renvoie une promesse (un objet de type Promise) qui va se résoudre avec
un objet response.
La méthode json() retourne la réponse en tant que objet JSON

fetch('[Link]
.then((response)=>{ [Link](response); return [Link]()})
.then((users)=>{[Link](users);setUtilisateurs(users)})

MÉTHODE 2

const [utilisateurs,setUtilisateurs]=useState([])
useEffect(()=>{
const getData=async (rep)=>{
const response= await
fetch('[Link]
const users=await [Link]()
setUtilisateurs(users)
}
getData()
},[])

introduction au routage :

Présentation de react-router-dom
C'est une bibliothèque qui permet de créer une navigation dans une application React à une seule
page (SPA, Single Page Application). Elle permet d'afficher différents composants en fonction de
l'URL.

Pourquoi l'utiliser ?
Quand on clique sur un lien dans une application classique, la page se recharge entièrement. Avec
react-router-dom, la navigation est fluide, car seules les parties nécessaires de la page sont
mises à jour, sans rechargement.

Concepts de base :
1. BrowserRouter : Le conteneur principal qui gère les URL.
2. Routes : Groupe de routes qui définissent quel composant s'affiche pour quelle URL.
3. Route : Une route spécifique qui associe une URL à un composant.
4. Link : Un lien pour naviguer entre les routes sans recharger la page.

Installation
Commence par installer la bibliothèque :
npm install react-router-dom

Code de base ([Link])

import React from "react";


import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

// Composants des pages


const Home = () => <h1>Page d'accueil</h1>;
const About = () => <h1>À propos</h1>;
const Contact = () => <h1>Contactez-nous</h1>;

function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">Accueil</Link></li>
<li><Link to="/about">À propos</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}

export default App;

Comment ça marche ?
1. <Router> : Englobe toute l'application pour gérer la navigation.
2. <Link> : Permet de naviguer entre les pages sans recharger la page.
3. <Routes> : Contient toutes les routes.
4. <Route> :
• path="/" : Définit l'URL.
• element={<Home />} : Spécifie le composant à afficher.
Résultat :
• Lorsque tu vas sur [Link] la page affiche Page d'accueil.
• Lorsque tu cliques sur À propos, l'URL devient /about, et la page affiche À propos.
• Pas de rechargement complet de la page, tout est fluide !

Vous aimerez peut-être aussi