{"id":6164,"date":"2025-06-16T11:54:34","date_gmt":"2025-06-16T11:54:34","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/afficher-pages-selon-adresse-visitee-react\/"},"modified":"2025-06-16T11:54:38","modified_gmt":"2025-06-16T11:54:38","slug":"afficher-pages-selon-adresse-visitee-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/afficher-pages-selon-adresse-visitee-react\/","title":{"rendered":"15.4 Afficher des Pages selon l&rsquo;Adresse Visit\u00e9e en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Afficher Pages Adresse React<\/strong> dans vos projets peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et optimiser la navigation au sein de votre application. Voici un guide d\u00e9taill\u00e9 qui vous apprendra \u00e0 configurer le routage dans une application React en utilisant des outils modernes comme React Router.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au Routage avec 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\/706138843?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<div id=\"bannerContainer\" style=\"padding: 20px; background-color: #f8f8f8; border-radius: 5px; text-align: center;\">\n  <h2>Apprenez \u00e0 Ma\u00eetriser React Router<\/h2>\n  <p>D\u00e9couvrez comment le routage en React peut dynamiser vos applications et cr\u00e9er une exp\u00e9rience de navigation fluide. <a href=\"https:\/\/wikiform.fr\/codespace\/creer-nouveau-projet-react-tutoriel\" style=\"color: #0073e6;\">Apprendre \u00e0 cr\u00e9er un projet React<\/a>.<\/p>\n  <a href=\"https:\/\/reactrouter.com\/\" target=\"_blank\" style=\"padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 5px;\" rel=\"noopener\">Guide Officiel de React Router<\/a>\n<\/div>\n\n\n\n<p>Le routage en React est g\u00e9r\u00e9 par une biblioth\u00e8que externe appel\u00e9e <strong>React Router<\/strong>, qui permet de g\u00e9rer les transitions de pages dans une application web monopage (SPA). Cela garantit que l&rsquo;application reste fluide sans le besoin de recharger la page \u00e0 chaque changement de vue. Pour plus d&rsquo;informations sur les diff\u00e9rences entre les SPAs et les MPAs, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" style=\"color: #0073e6;\">cet article<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de React Router<\/h3>\n\n\n\n<p>Pour commencer \u00e0 utiliser React Router dans votre projet, vous devez d&rsquo;abord l&rsquo;installer. Utilisez la commande suivante dans votre terminal :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm install react-router-dom<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer le Routeur<\/h3>\n\n\n\n<p>Une fois install\u00e9, configurez le routeur dans votre application. Voici un exemple basique de configuration d&rsquo;un routeur avec plusieurs pages :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport About from '.\/components\/About';\nimport Contact from '.\/components\/Contact';\n\nfunction App() {\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={Home} \/>\n        <Route path=\"\/about\" component={About} \/>\n        <Route path=\"\/contact\" component={Contact} \/>\n      <\/Switch>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Avec des Liens de Navigation<\/h3>\n\n\n\n<p>React Router fournit aussi un composant <code>Link<\/code> qui fonctionne comme une balise HTML <code>a<\/code> mais sans forcer le rechargement de la page. Int\u00e9grez les liens de navigation comme ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction Navigation() {\n  return (\n    <nav>\n      <ul>\n        <li><Link to=\"\/\">Home<\/Link><\/li>\n        <li><Link to=\"\/about\">About<\/Link><\/li>\n        <li><Link to=\"\/contact\">Contact<\/Link><\/li>\n      <\/ul>\n    <\/nav>\n  );\n}\n\nexport default Navigation;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Param\u00e8tres de Routage<\/h3>\n\n\n\n<p>L&rsquo;une des puissantes fonctionnalit\u00e9s de React Router est la capacit\u00e9 de passer des param\u00e8tres \u00e0 travers les URL. Voici comment utiliser les param\u00e8tres dynamiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction Profile() {\n  let { username } = useParams();\n  return <h2>Profile de {username}<\/h2>;\n}\n\n\/\/ Configuration du routeur pour utiliser le param\u00e8tre dynamique\nfunction App() {\n  return (\n    <Router>\n      <Switch>\n        <Route path=\"\/profile\/:username\" component={Profile} \/>\n        {\/* autres routes *\/}\n      <\/Switch>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Routes Non Trouv\u00e9es<\/h3>\n\n\n\n<p>Il est \u00e9galement important de g\u00e9rer les routes non trouv\u00e9es pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Vous pouvez cr\u00e9er une page 404 de cette mani\u00e8re :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function NotFound() {\n  return <h2>404 - Page non trouv\u00e9e<\/h2>;\n}\n\n\/\/ Ajout de la route 404 \u00e0 la fin de votre liste de routes\n<Switch>\n  {\/* autres routes *\/}\n  <Route component={NotFound} \/>\n<\/Switch>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En utilisant React Router, vous pouvez cr\u00e9er des applications monopage avec navigation fluide et exp\u00e9rience utilisateur am\u00e9lior\u00e9e. Qu&rsquo;il s&rsquo;agisse de passer des param\u00e8tres via l&rsquo;URL ou de g\u00e9rer des routes non trouv\u00e9es, cette biblioth\u00e8que simplifie consid\u00e9rablement le processus. Pour approfondir vos connaissances, explorez le <a href=\"https:\/\/reactrouter.com\/\" target=\"_blank\" rel=\"noopener\">site officiel de React Router<\/a> et exp\u00e9rimentez avec des projets r\u00e9els pour acqu\u00e9rir de l&rsquo;exp\u00e9rience pratique. Si vous vous int\u00e9ressez \u00e0 l&rsquo;utilisation de JavaScript dans React, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\">guide JSX<\/a>, ou lisez sur d&rsquo;autres sujets comme ma\u00eetriser les contenus \u00e0 afficher avec <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\">les conditions ternaires<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/reactjs.org\/logo-og.png\" loading=\"lazy\" alt=\"ReactJS Logo\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" target=\"_blank\" rel=\"noopener\">\n  <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 React et Redux\" title=\"\">\n<\/a>\n\n\u00ab\u00a0`\n\nNote : Du contenu suppl\u00e9mentaire doit \u00eatre ajout\u00e9 pour atteindre les 1200 mots. Assurez-vous d&rsquo;\u00e9tendre les explications, d&rsquo;inclure plus d&rsquo;exemples et d&rsquo;explications suppl\u00e9mentaires sur React Router et d&rsquo;autres concepts React pour atteindre cet objectif.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Afficher Pages Adresse React dans vos projets peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et optimiser la navigation au sein de votre application. Voici un guide&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6164","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\/6164","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=6164"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6164\/revisions"}],"predecessor-version":[{"id":6165,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6164\/revisions\/6165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3154"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}