React - La gestion des routes

Introduction:

La gestion de la navigation est essentielle dans le développement d'une application web. Dans le monde de React, React Router se démarque comme une bibliothèque incontournable, elle offre une approche déclarative pour la gestion de la navigation. Notre exploration dans cet article se concentre sur l'exploitation de React Router pour définir routes, passer des paramètres d'URL et gérer la navigation entre différentes vues de l'application. Pour mieux saisir ces concepts, nous les illustrerons à travers des exemples concrets.

Installation de React Router

Avant de commencer, nous devons installer React Router dans notre application. Vous pouvez le faire en utilisant npm ou yarn :

npm install react-router-dom 

ou 

yarn add react-router-dom

Définition des routes

Une fois installé, nous pouvons commencer à configurer nos routes dans le fichier routes.js. Pour ce faire, nous utiliserons les composants fournis par React Router, tels que BrowserRouter, Route et Switch.

routes.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const Routes = () => {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/contact" component={Contact} />
       <Route component={NotFound} />
     </Switch>
   </Router>
 );
};

export default Routes;

Dans cet exemple, nous utilisons le composant BrowserRouter pour encapsuler nos routes. Ensuite, nous utilisons le composant Switch pour rendre une seule route à la fois. Chaque route est définie avec le composant Route, qui associe un chemin d'URL à un composant spécifique.

Utilisation des routes dans App.js

Maintenant, après que nous avons défini nos routes dans routes.js, nous pouvons les utiliser dans notre composant App.js

App.js

import React from 'react';
import Routes from './routes';

const App = () => {
 return (
   <div>
     <Routes />
   </div>
 );
};

export default App;

Dans cet exemple, nous importons le composant Routes depuis notre fichier routes.js et l'incluons dans le composant App. Cela permet à notre application d'utiliser les routes définies dans routes.js pour gérer la navigation.

Utilisation des paramètres d'URL

React Router nous permet aussi de passer des paramètres d'URL à nos routes. Ces paramètres peuvent être utilisés pour rendre nos routes plus dynamiques.

App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import UserProfile from './components/UserProfile';
import NotFound from './components/NotFound';

function App() {
 return (
   <Router>
     <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/profile/:username" component={UserProfile} />
       <Route component={NotFound} />
     </Switch>
   </Router>
 );
}

export default App;

Exemple d'utilisation des paramètres d'URL

Dans cet exemple, nous avons défini une route /profile/:username, où :username est un paramètre d'URL dynamique. Nous pouvons accéder à la valeur de ce paramètre dans notre composant UserProfile à l'aide de useParams fourni par React Router.

UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
 const { username } = useParams();

 return (
   <div>
     <h2>Profile Page</h2>
     <p>Username: {username}</p>
   </div>
 );
}

export default UserProfile;

Conclusion

Dans cet article, nous avons exploré la gestion des routes dans une application React à l'aide de React Router. Nous avons appris à configurer les routes, à utiliser des paramètres d'URL et à gérer la navigation entre différentes vues de l'application.

Références : 

1. « React Router », W3Schools, https://www.w3schools.com/react/react_router.asp, (consulté le 23 mars 2024)
2. Aman Mittal, « How to use React Router v6 in React apps », Log rocket, https://blog.logrocket.com/react-router-v6-guide/, (consulté le 23 mars 2024)
3. Ibrahima Ndaw, « A Complete Beginner's Guide to React Router », freecodecamp, https://www.freecodecamp.org/news/a-complete-beginners-guide-to-react-router-include-router-hooks/, (consulté le 23 mars 2024)