{"id":6162,"date":"2025-06-09T11:54:09","date_gmt":"2025-06-09T11:54:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/mettre-en-place-route-application-react\/"},"modified":"2025-06-09T11:54:13","modified_gmt":"2025-06-09T11:54:13","slug":"mettre-en-place-route-application-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/mettre-en-place-route-application-react\/","title":{"rendered":"15.3 Mettre en Place une Route dans une Application React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Route Application React :<\/strong> Comment mettre en place une route dans une application React est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs web qui souhaitent cr\u00e9er des applications robustes et bien structur\u00e9es. Dans ce tutoriel d\u00e9taill\u00e9, nous allons explorer comment configurer et utiliser le routage dans une application React en utilisant la populaire biblioth\u00e8que React Router. Gr\u00e2ce aux exemples de code fournis, vous apprendrez \u00e0 cr\u00e9er des interfaces de navigation claires et efficaces.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Routage dans React<\/strong> &#8211; Route Application React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706138697?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Le <strong>routage dans React<\/strong> permet de diriger les utilisateurs vers diff\u00e9rentes parties d&rsquo;une application web en fonction de l&rsquo;URL. React Router est une biblioth\u00e8que standard qui facilite cette fonctionnalit\u00e9 en fournissant des composants React pour le routage c\u00f4t\u00e9 client. Avant de plonger dans l&rsquo;impl\u00e9mentation, assurez-vous d&rsquo;avoir React et React Router install\u00e9s dans votre projet. Pour plus d&rsquo;informations sur les diff\u00e9rences entre les single-page et multi-page applications, vous pouvez consulter <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">cet article<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer React Router<\/h3>\n\n\n\n<p>Pour utiliser React Router dans votre projet, vous devrez d&rsquo;abord l&rsquo;installer. Ex\u00e9cutez la commande suivante pour ajouter React Router \u00e0 votre projet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npm install react-router-dom<\/code><\/pre>\n\n\n\n<p>Assurez-vous \u00e9galement que React et ReactDOM sont correctement configur\u00e9s dans votre projet pour garantir que tout fonctionne ensemble sans probl\u00e8me. Pour en savoir plus sur l&rsquo;utilisation des modules JavaScript avec React, visitez <a href=\"https:\/\/wikiform.fr\/codespace\/importer-exporter-modules-javascript-react\" target=\"_blank\" rel=\"noopener\">cet article<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants de Route<\/h3>\n\n\n\n<p>Une fois React Router install\u00e9, vous pouvez commencer \u00e0 d\u00e9finir vos routes. Commencez par cr\u00e9er des composants qui repr\u00e9senteront les diff\u00e9rentes pages de votre application. Voici un exemple simple de deux composants de page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst Home = () => (\n  <div>\n    <h1>Accueil<\/h1>\n    <p>Bienvenue sur la page d'accueil !<\/p>\n  <\/div>\n);\n\nconst About = () => (\n  <div>\n    <h1>\u00c0 propos<\/h1>\n    <p>Ceci est la page \u00c0 propos.<\/p>\n  <\/div>\n);\n\nexport { Home, About };<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir les Routes avec React Router &#8211; Route Application React<\/h3>\n\n\n\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 vos composants de page, nous allons maintenant configurer React Router pour naviguer entre ces pages. Modifions le composant principal de notre application pour inclure React Router :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport { Home, About } from '.\/components\/YourComponentFile';\n\nfunction App() {\n  return (\n    <Router>\n      <div>\n        <Routes>\n          <Route path=\"\/\" element={<Home \/>} \/>\n          <Route path=\"\/about\" element={<About \/>} \/>\n        <\/Routes>\n      <\/div>\n    <\/Router>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>Nous avons utilis\u00e9 le <code>BrowserRouter<\/code> en tant que conteneur pour notre application, et les composants <code>Routes<\/code> et <code>Route<\/code> pour d\u00e9finir les chemins vers nos composants de page. Pour des conseils sur la cr\u00e9ation de votre premi\u00e8re application React, rendez-vous <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">ici<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Navigation entre les Pages<\/h3>\n\n\n\n<p>Pour permettre aux utilisateurs de naviguer facilement entre les pages, nous pouvons ajouter un menu de navigation. Voici comment ajouter des liens de navigation dans votre application :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst Navbar = () => (\n  <nav>\n    <ul>\n      <li><Link to=\"\/\">Accueil<\/Link><\/li>\n      <li><Link to=\"\/about\">\u00c0 propos<\/Link><\/li>\n    <\/ul>\n  <\/nav>\n);\n\nexport default Navbar;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer la Navigation dans l&rsquo;Application<\/h3>\n\n\n\n<p>Incluez maintenant le composant Navbar dans votre application, de sorte que les liens de navigation apparaissent sur toutes les pages :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport Navbar from '.\/components\/Navbar';\nimport { Home, About } from '.\/components\/YourComponentFile';\n\nfunction App() {\n  return (\n    <Router>\n      <Navbar \/>\n      <div>\n        <Routes>\n          <Route path=\"\/\" element={<Home \/>} \/>\n          <Route path=\"\/about\" element={<About \/>} \/>\n        <\/Routes>\n      <\/div>\n    <\/Router>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>Pour une meilleure int\u00e9gration de la navigation dans une application React, pensez \u00e0 utiliser les <strong>Styled Components<\/strong> ou des classes CSS, expliqu\u00e9s <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\" target=\"_blank\" rel=\"noopener\">ici<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion &#8211; Route Application React<\/h2>\n\n\n\n<p>Configurer le <strong>routage dans une application React<\/strong> \u00e0 l&rsquo;aide de React Router est une t\u00e2che simple une fois que vous comprenez les composants et la structure. Les routes permettent aux utilisateurs de naviguer entre diff\u00e9rentes parties de votre application avec facilit\u00e9, am\u00e9liorant ainsi l&rsquo;exp\u00e9rience utilisateur. Continuez \u00e0 explorer React Router pour en apprendre davantage sur les fonctionnalit\u00e9s avanc\u00e9es, telles que les routes imbriqu\u00e9es et la gestion de l&rsquo;\u00e9tat des itin\u00e9raires. Pour des tutoriels suppl\u00e9mentaires, explorez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-statefull-vs-stateless-react\" target=\"_blank\" rel=\"noopener\">composants Stateful vs Stateless<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Route Application React : Comment mettre en place une route dans une application React est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs web qui souhaitent&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6162"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6162\/revisions"}],"predecessor-version":[{"id":6163,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6162\/revisions\/6163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3227"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}