Scribd
Importer
72 vues1 page

Router

Le document explique comment utiliser la bibliothèque react-router pour définir des routes entre des URLs et des composants React. Il donne un exemple de code pour importer react-router-dom et définir des liens de navigation vers différents composants.

Transféré par

Khalid Yn
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 TXT, PDF, TXT ou lisez en ligne sur Scribd
72 vues1 page

Router

Le document explique comment utiliser la bibliothèque react-router pour définir des routes entre des URLs et des composants React. Il donne un exemple de code pour importer react-router-dom et définir des liens de navigation vers différents composants.

Transféré par

Khalid Yn
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 TXT, PDF, TXT ou lisez en ligne sur Scribd

La composante <Route> définit une relation (mapping) entre un URL et un Component.

Cela signifie que lorsque l'utilisateur visite une URL sur le navigateur une
Component correspondant doit être rendu sur l'interface.
a) Donner la commande qui permet d'ajouter la bibliothèque react-router(2 pts)
b) Compléter le code afin d'afficher les informations de composant correspond à
chaque option de menu (2 pts)
(Exemple: Le clic sur le lien liste Livres affiche le composant < liste Livres de
la question Q2....)
Reponses:
a) Pour ajouter la bibliothèque react-router, vous pouvez utiliser npm ou yarn.
Voici la commande pour ajouter react-router-dom, qui est une version spécifique de
react-router pour les applications web avec React :
import React from 'react';
npm install react-router-dom

b) Voici un exemple de code complet pour utiliser react-router-dom afin de définir


des routes et afficher les informations de composant correspondant à chaque option
de menu :
// Components
import {BrowserRouter as Router,Link,Routes,Route} from 'react-router-dom'
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import BookList from './components/BookList';

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Accueil</Link>
</li>
<li>
<Link to="/about">À propos</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
<li>
<Link to="/books">Liste Livres</Link>
</li>
</ul>
</nav>
<Routes>
<Route exact path="/" element={<Home/>} />
<Route path="/about" element={<About/>} />
<Route path="/contact" element={<Contact/>} />
<Route path="/books" element={<BookList/>} />
</Routes>
</div>
</Router>
);
}

export default App;

Vous aimerez peut-être aussi