Étape 1 : Installation de react-router-dom
D'abord, installe la bibliothèque react-router-dom en utilisant npm ou yarn :
bash
Copier le code
npm install react-router-dom
ou
bash
Copier le code
yarn add react-router-dom
Étape 2 : Configurer le routeur dans ton projet
Ensuite, dans ton fichier [Link], tu peux configurer les routes en utilisant BrowserRouter,
Routes, et Route pour définir les différentes pages ou composants à afficher selon l'URL.
Voici un exemple :
[Link]
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
return (
<Router>
<div>
<h1>Mon Application React</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}
export default App;
Étape 3 : Créer les composants de pages
Tu dois ensuite créer les composants correspondant à chaque page, comme par exemple :
pages/[Link]
import React from 'react';
function Home() {
return <h2>Page d'accueil</h2>;
}
export default Home;
pages/[Link]
import React from 'react';
function About() {
return <h2>À propos de nous</h2>;
}
export default About;
pages/[Link]
import React from 'react';
function Contact() {
return <h2>Contactez-nous</h2>;
}
export default Contact;
Étape 4 : Tester l'application
Lorsque tu exécutes ton projet (npm start ou yarn start), tu devrais pouvoir naviguer entre
les différentes pages en modifiant l'URL dans le navigateur, par exemple :
/ pour la page d'accueil.
/about pour la page "À propos".
/contact pour la page "Contact".
Ajout de liens de navigation
Tu peux ajouter un menu de navigation pour faciliter la navigation entre les pages :
import { Link } from 'react-router-dom';
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>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}
Avec cela, tu pourras cliquer sur les liens pour naviguer entre les différentes pages sans
recharger l'application.
