{"id":6166,"date":"2025-06-23T11:54:39","date_gmt":"2025-06-23T11:54:39","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-liens-link-application-react\/"},"modified":"2025-06-23T11:54:43","modified_gmt":"2025-06-23T11:54:43","slug":"ajouter-liens-link-application-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-liens-link-application-react\/","title":{"rendered":"15.5 Ajouter des Liens (Link) dans une Application React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Ajouter des Liens (Link) dans une Application React<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs cherchant \u00e0 cr\u00e9er des interfaces utilisateur modernes et interactives. Cette fonctionnalit\u00e9 permet non seulement de naviguer entre diff\u00e9rentes pages de votre application, mais elle am\u00e9liore \u00e9galement l&rsquo;exp\u00e9rience utilisateur en assurant une navigation fluide et rapide. Apprenons ensemble comment impl\u00e9menter cette fonctionnalit\u00e9 \u00e0 travers des exemples pratiques. Si vous \u00eates pr\u00eat \u00e0 cr\u00e9er une application avec React, commencez par d\u00e9couvrir notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">tutoriel pour cr\u00e9er votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Liens (Link) dans 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\/706138945?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>Dans le monde de React, la navigation entre diff\u00e9rentes parties de votre application est principalement g\u00e9r\u00e9e par des biblioth\u00e8ques de routage telles que React Router. Cette biblioth\u00e8que offre des composants puissants comme <code>&lt;Link&gt;<\/code> et <code>&lt;NavLink&gt;<\/code> pour cr\u00e9er des liens de mani\u00e8re simple et efficace. Si vous \u00eates int\u00e9ress\u00e9 par les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">diff\u00e9rences entre les applications single-page et multi-page<\/a>, lisez notre guide d\u00e9taill\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer React Router<\/h3>\n\n\n\n<p>Avant d&rsquo;ajouter des liens, il est crucial de configurer React Router dans votre projet. Assurez-vous d&rsquo;avoir install\u00e9 la biblioth\u00e8que via npm ou yarn :<\/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>Ensuite, configurez le routeur dans votre fichier principal, g\u00e9n\u00e9ralement <code>index.js<\/code> ou <code>App.js<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from '.\/App';\n\nReactDOM.render(\n  <BrowserRouter>\n    <App \/>\n  <\/BrowserRouter>,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<p>Pour ceux qui veulent approfondir leurs connaissances, il est conseill\u00e9 de se familiariser avec les <a href=\"https:\/\/wikiform.fr\/codespace\/novelites-javascript-savoir-react\">derni\u00e8res nouveaut\u00e9s JavaScript<\/a> \u00e0 savoir pour React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Liens avec React Router<\/h3>\n\n\n\n<p>Une fois React Router configur\u00e9, vous pouvez commencer \u00e0 cr\u00e9er des liens entre les diff\u00e9rentes pages de votre application. Utilisez le composant <code>&lt;Link&gt;<\/code> pour naviguer entre les routes :<\/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 Navbar() {\n  return (\n    <nav>\n      <ul>\n        <li><Link to=\"\/\">Accueil<\/Link><\/li>\n        <li><Link to=\"\/about\">\u00c0 Propos<\/Link><\/li>\n        <li><Link to=\"\/contact\">Contact<\/Link><\/li>\n      <\/ul>\n    <\/nav>\n  );\n}\n\nexport default Navbar;\n<\/code><\/pre>\n\n\n\n<p>Si vous \u00eates int\u00e9ress\u00e9 par l&rsquo;utilisation de JSX dans React, nous avons un article d\u00e9di\u00e9 \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\">l&rsquo;utilisation de JavaScript dans JSX<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir les Routes Correspondantes<\/h3>\n\n\n\n<p>Pour que vos liens fonctionnent, d\u00e9finissez les routes correspondantes dans votre application. Utilisez le composant <code>&lt;Route&gt;<\/code> pour associer chaque lien \u00e0 une composante ou \u00e0 une page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { Routes, Route } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport Contact from '.\/pages\/Contact';\nimport Navbar from '.\/components\/Navbar';\n\nfunction App() {\n  return (\n    <div>\n      <Navbar \/>\n      <Routes>\n        <Route path=\"\/\" element={<Home \/>} \/>\n        <Route path=\"\/about\" element={<About \/>} \/>\n        <Route path=\"\/contact\" element={<Contact \/>} \/>\n      <\/Routes>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>D\u00e9couvrez \u00e9galement notre article sur pourquoi il est essentiel de <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\">comprendre et utiliser les React Fragments<\/a> pour optimiser votre code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Devenir Plus Performant avec <code>&lt;NavLink&gt;<\/code><\/h3>\n\n\n\n<p>Le composant <code>&lt;NavLink&gt;<\/code> offre les m\u00eames fonctionnalit\u00e9s que <code>&lt;Link&gt;<\/code>, avec des options suppl\u00e9mentaires pour appliquer des styles aux liens actifs. Ceci est particuli\u00e8rement utile pour indiquer aux utilisateurs la page qu&rsquo;ils consultent actuellement. Pour approfondir vos comp\u00e9tences en React, vous pouvez consulter la diff\u00e9rence entre <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">les composants par classe et par fonction<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { NavLink } from 'react-router-dom';\n\nfunction Navbar() {\n  return (\n    <nav>\n      <ul>\n        <li><NavLink to=\"\/\" activeClassName=\"active\">Accueil<\/NavLink><\/li>\n        <li><NavLink to=\"\/about\" activeClassName=\"active\">\u00c0 Propos<\/NavLink><\/li>\n        <li><NavLink to=\"\/contact\" activeClassName=\"active\">Contact<\/NavLink><\/li>\n      <\/ul>\n    <\/nav>\n  );\n}\n\nexport default Navbar;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Liens Link Application React<\/h2>\n\n\n\n<p>L&rsquo;ajout de liens dans une application React est un processus essentiel qui contribue \u00e0 enrichir l&rsquo;exp\u00e9rience utilisateur. En utilisant React Router, vous pouvez cr\u00e9er des applications complexes avec une navigation fluide et intuitive. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter avec React pour ma\u00eetriser davantage ses fonctionnalit\u00e9s avanc\u00e9es et cr\u00e9er des applications Web puissantes. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\" rel=\"dofollow noopener\" target=\"_blank\">le tutoriel officiel de React<\/a> et d\u00e9couvrez des projets int\u00e9ressants pour mettre en pratique vos comp\u00e9tences. Vous pouvez \u00e9galement lire sur <a href=\"https:\/\/javapoint.com\/react-router\" rel=\"dofollow noopener\" target=\"_blank\">le React Router sur JavaTpoint<\/a> pour des informations suppl\u00e9mentaires.<\/p>\n\n\n\n<p><a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" 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=\"Promotion Learnify\" title=\"\"><\/a><\/p>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Ajouter des Liens (Link) dans une Application React est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs cherchant \u00e0 cr\u00e9er des interfaces utilisateur modernes et interactives&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":3159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6166","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\/6166","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=6166"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6166\/revisions"}],"predecessor-version":[{"id":6167,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6166\/revisions\/6167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3159"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}