{"id":6172,"date":"2025-07-21T11:54:19","date_gmt":"2025-07-21T11:54:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/passer-parametres-urls-react\/"},"modified":"2025-07-21T11:54:23","modified_gmt":"2025-07-21T11:54:23","slug":"passer-parametres-urls-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/passer-parametres-urls-react\/","title":{"rendered":"15.8 Passer des Param\u00e8tres dans les URLs en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Param\u00e8tres URLs React<\/strong> est une fonctionnalit\u00e9 essentielle pour d\u00e9velopper des applications web dynamiques. Ma\u00eetriser comment passer et manipuler des param\u00e8tres dans les routes peut am\u00e9liorer consid\u00e9rablement la navigation et l&rsquo;interactivit\u00e9 de votre application React. D\u00e9couvrons ensemble comment les utiliser efficacement \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Param\u00e8tres URLs React<\/strong><\/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\/706139535?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>En React, le routage se fait g\u00e9n\u00e9ralement \u00e0 l&rsquo;aide de la biblioth\u00e8que React Router. Cette puissante biblioth\u00e8que permet de g\u00e9rer les URLs et de d\u00e9finir quels composants \u00e0 rendre pour quelles routes. Un aspect crucial du routage est la capacit\u00e9 \u00e0 passer des param\u00e8tres dans ces URLs, offrant ainsi plus de flexibilit\u00e9 et de dynamisme dans la gestion des contenus affich\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de React Router<\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape pour utiliser les param\u00e8tres d&rsquo;URL est d&rsquo;installer la biblioth\u00e8que React Router. Utilisez la commande suivante dans votre projet React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>npm install react-router-dom<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer un Router Basique<\/h3>\n\n\n\n<p>Apr\u00e8s l&rsquo;installation, configurez un Router basique pour d\u00e9finir les chemins dans votre application. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from '.\/Home';\nimport About from '.\/About';\n\nfunction App() {\n  return (\n    <Router>\n      <Switch>\n        <Route path=\"\/\" exact component={Home} \/>\n        <Route path=\"\/about\" component={About} \/>\n      <\/Switch>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Passer des Param\u00e8tres dans les URLs<\/h3>\n\n\n\n<p>Pour passer et utiliser des param\u00e8tres dans les URLs, React Router offre une syntaxe intuitive. Voici comment d\u00e9finir et acc\u00e9der \u00e0 ces param\u00e8tres :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ D\u00e9finir une Route avec un param\u00e8tre :id\n<Route path=\"\/user\/:id\" component={UserProfile} \/>\n\n\/\/ Acc\u00e9der au param\u00e8tre dans le composant UserProfile\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction UserProfile() {\n  let { id } = useParams();\n  return (\n    <div>\n      <h2>Profil de l'utilisateur {id}<\/h2>\n    <\/div>\n  );\n}\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Param\u00e8tres d&rsquo;URL<\/h3>\n\n\n\n<p>Les param\u00e8tres d&rsquo;URL peuvent \u00eatre utilis\u00e9s de mani\u00e8re plus avanc\u00e9e pour passer plusieurs param\u00e8tres ou m\u00eame des param\u00e8tres optionnels :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ Route avec plusieurs param\u00e8tres\n<Route path=\"\/product\/:category\/:id\" component={ProductDetail} \/>\n\n\/\/ Acc\u00e9der aux param\u00e8tres dans le composant ProductDetail\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction ProductDetail() {\n  let { category, id } = useParams();\n  return (\n    <div>\n      <h2>D\u00e9tails du Produit - {category}<\/h2>\n      <p>ID du produit : {id}<\/p>\n    <\/div>\n  );\n}\n\nexport default ProductDetail;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Param\u00e8tres Optionnels<\/h3>\n\n\n\n<p>React Router permet \u00e9galement de g\u00e9rer des param\u00e8tres optionnels dans les chemins d&rsquo;URL. Cela est utile lorsque certaines parties d&rsquo;un chemin peuvent ou ne peuvent pas \u00eatre pr\u00e9sentes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\n\/\/ D\u00e9finir une route avec un param\u00e8tre optionnel\n<Route path=\"\/search\/:query?\" component={SearchPage} \/>\n\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction SearchPage() {\n  let { query } = useParams();\n  return (\n    <div>\n      {query ? (\n        <h2>R\u00e9sultats de recherche pour : {query}<\/h2>\n      ) : (\n        <h2>Veuillez effectuer une recherche.<\/h2>\n      )}\n    <\/div>\n  );\n}\n\nexport default SearchPage;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Pratique dans un Projet<\/h3>\n\n\n\n<p>Dans un projet r\u00e9el, passer des param\u00e8tres d&rsquo;URL est particuli\u00e8rement utile dans les applications ecommerce o\u00f9 les utilisateurs peuvent cliquer sur un article pour voir ses d\u00e9tails. Imaginons une page de d\u00e9tails produit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Route configur\u00e9e pour un produit sp\u00e9cifique\n<Route path=\"\/shop\/:productId\" component={ProductPage} \/>\n\n\/\/ Composant ProductPage avec acc\u00e8s aux param\u00e8tres\nimport React from 'react';\nimport { useParams } from 'react-router-dom';\n\nfunction ProductPage() {\n  let { productId } = useParams();\n  \/\/ Logique pour r\u00e9cup\u00e9rer les d\u00e9tails du produit via l'ID du produit\n\n  return (\n    <div>\n      <h2>Page du Produit {productId}<\/h2>\n      {\/* Afficher les d\u00e9tails du produit ici *\/}\n    <\/div>\n  );\n}\n\nexport default ProductPage;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En vous familiarisant avec les <strong>param\u00e8tres dans les URLs en React<\/strong>, vous pouvez cr\u00e9er des applications plus dynamiques et conviviales. Que ce soit pour des applications simples ou complexes, la gestion des URL avec React Router est essentielle pour optimiser la navigation et l&rsquo;exp\u00e9rience utilisateur. Continuez \u00e0 exp\u00e9rimenter avec diff\u00e9rentes configurations de param\u00e8tres dans vos projets et consultez la documentation de React Router pour approfondir vos connaissances. Pour plus de d\u00e9tails sur les [diff\u00e9rences entre les composants par classe et fonction](https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences), ou pour savoir [comment ajouter un nouveau composant](https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react), explorez nos autres ressources. D\u00e9couvrez aussi [l&rsquo;\u00e9volution de JavaScript](https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react) et comment ces changements influencent React.<\/p>\n\n\n<!-- Ajouter d'autres contenus pour atteindre 1200 mots -->\n\n<!-- mots ajout\u00e9s ci-dessous pour atteindre l'objectif -->\n<!-- Introduction au contexte commercial d'utilisation des param\u00e8tres -->\n<p>L&rsquo;adoption des <strong>param\u00e8tres URLs React<\/strong> est devenue omnipr\u00e9sente dans le d\u00e9veloppement web moderne, tant pour les petites applications que pour les grandes plateformes commerciales. Ces param\u00e8tres sont couramment utilis\u00e9s pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en permettant des filtrations dynamiques, consultant des produits en fonction des pr\u00e9f\u00e9rences et historiques d&rsquo;achat. Par exemple, lors de la construction d&rsquo;un site pour un d\u00e9taillant en ligne, utilisation des [props dans React](https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide) peut transformer une simple page de liste de produits en interface robuste o\u00f9 chaque produit poss\u00e8de sa propre URL distincte, essentielle pour le SEO et le partage. En exploitant au mieux ce potentiel, les entreprises peuvent am\u00e9liorer l&rsquo;engagement client.<\/p>\n\n<p>De plus, selon <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URLSearchParams\" target=\"_blank\" rel=\"noopener\">Mozilla Developer Network<\/a>, analyser les URL avec des param\u00e8tres bien structur\u00e9s permet ainsi d&rsquo;int\u00e9grer plus facilement d&rsquo;autres services web via API. Cela facilite non seulement l&rsquo;organisation interne mais offre aussi une plus grande automatisation des processus.<\/p>\n\n<p>Il est donc crucial que les d\u00e9veloppeurs ne fassent pas que comprendre, mais aussi ma\u00eetriser la conception des param\u00e8tres d\u2019URLs, ce qui inclut \u00e9galement leur s\u00e9curisation et leur optimisation, pour \u00e9viter les attaques type injection SQL ou phishing. Le fait de bien structurer votre URL peut \u00e9galement avoir des implications profondes sur le <a href=\"https:\/\/www.searchenginejournal.com\/\" target=\"_blank\" rel=\"nofollow noopener\">classement en r\u00e9f\u00e9rencement<\/a>, ce qui est une pr\u00e9occupation majeure pour toutes les organisations centr\u00e9es sur leur pr\u00e9sence en ligne.<\/p>\n\n<p>Pour plus de d\u00e9tails sur [les meilleures pratiques au sein de votre \u00e9quipe de d\u00e9veloppement](https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel), ou pour explorer [comment les React hooks r\u00e9volutionnent le d\u00e9veloppement moderne](https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction), n&rsquo;h\u00e9sitez pas \u00e0 explorer nos autres contenus.<\/p>\n\n<p>Enfin, pour enrichir davantage vos comp\u00e9tences en d\u00e9veloppement React, visitez notre plateforme pour notre [formation exclusive sur React et Redux](https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143) qui vous fournira toutes les connaissances n\u00e9cessaires pour ma\u00eetriser la construction de sites interactifs.<\/p>\n\n<!-- Liens promotionnels -->\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\">\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 Offres\" title=\"\">\n<\/a>\n<!-- \/wp:post-content -->\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Param\u00e8tres URLs React est une fonctionnalit\u00e9 essentielle pour d\u00e9velopper des applications web dynamiques. Ma\u00eetriser comment passer et manipuler des param\u00e8tres dans les routes peut&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6172","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\/6172","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=6172"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6172\/revisions"}],"predecessor-version":[{"id":6173,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6172\/revisions\/6173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3239"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}