{"id":6170,"date":"2025-07-14T11:56:33","date_gmt":"2025-07-14T11:56:33","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-style-lien-actuel-navlink-react\/"},"modified":"2025-07-14T11:56:37","modified_gmt":"2025-07-14T11:56:37","slug":"ajouter-style-lien-actuel-navlink-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-style-lien-actuel-navlink-react\/","title":{"rendered":"15.7 Ajouter du Style sur le Lien Actuel (NavLink) en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Style Lien Actuel NavLink React<\/strong> est une comp\u00e9tence indispensable pour tout d\u00e9veloppeur front-end cherchant \u00e0 optimiser l&rsquo;exp\u00e9rience utilisateur sur une application React. Dans cet article, nous allons d\u00e9couvrir comment styliser le <strong>lien actuel (NavLink)<\/strong> en React de mani\u00e8re dynamique et \u00e9l\u00e9gante afin de vraiment amplifier l&rsquo;interactivit\u00e9 de vos applications. Apprenons \u00e0 mettre en \u0153uvre cette pratique via des exemples concrets et facilement adaptables.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Style Dynamique des NavLinks en 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\/706139348?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>Les NavLinks jouent un r\u00f4le crucial dans la navigation d&rsquo;une application React. Gr\u00e2ce \u00e0 la biblioth\u00e8que <code>react-router-dom<\/code>, nous pouvons cr\u00e9er des liens qui changent leur style lorsqu&rsquo;ils sont actifs, am\u00e9liorant ainsi la mise en \u00e9vidence de la page o\u00f9 se trouve l&rsquo;utilisateur. Apprenons \u00e0 utiliser <code>NavLink<\/code> pour accomplir cela.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Simple Navigation avec <code>NavLink<\/code><\/h3>\n\n\n\n<p>Tout d&rsquo;abord, assurez-vous d&rsquo;avoir <code>react-router-dom<\/code> install\u00e9 dans votre projet. Voici comment configurer une simple navigation de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';\n\nfunction App() {\n  return (\n    <Router>\n      <nav>\n        <NavLink exact to=\"\/\" activeClassName=\"active\">Accueil<\/NavLink>\n        <NavLink to=\"\/about\" activeClassName=\"active\">\u00c0 propos<\/NavLink>\n        <NavLink to=\"\/contact\" activeClassName=\"active\">Contact<\/NavLink>\n      <\/nav>\n      <Route path=\"\/\" exact component={Home} \/>\n      <Route path=\"\/about\" component={About} \/>\n      <Route path=\"\/contact\" component={Contact} \/>\n    <\/Router>\n  );\n}\n\nfunction Home() {\n  return <h2>Page d'accueil<\/h2>;\n}\n\nfunction About() {\n  return <h2>\u00c0 propos de nous<\/h2>;\n}\n\nfunction Contact() {\n  return <h2>Contactez-nous<\/h2>;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styler dynamiquement le Lien Actif avec NavLink React<\/h3>\n\n\n\n<p>Pour habiliter le style dynamique des liens actifs, nous utilisons la propri\u00e9t\u00e9 <code>activeClassName<\/code> ou <code>activeStyle<\/code>. Voici comment appliquer des styles CSS aux liens actifs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';\nimport '.\/App.css'; \/\/ Assurez-vous d'avoir ce fichier CSS pour le style\n\nfunction App() {\n  return (\n    <Router>\n      <nav>\n        <NavLink exact to=\"\/\" activeClassName=\"active-link\" style={{ margin: '10px' }}>Accueil<\/NavLink>\n        <NavLink to=\"\/about\" activeClassName=\"active-link\" style={{ margin: '10px' }}>\u00c0 propos<\/NavLink>\n        <NavLink to=\"\/contact\" activeClassName=\"active-link\" style={{ margin: '10px' }}>Contact<\/NavLink>\n      <\/nav>\n      <Route path=\"\/\" exact component={Home} \/>\n      <Route path=\"\/about\" component={About} \/>\n      <Route path=\"\/contact\" component={Contact} \/>\n    <\/Router>\n  );\n}\n\n\/\/ App.css\n.active-link {\n  font-weight: bold;\n  color: blue;\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>activeStyle<\/code> pour plus de Flexibilit\u00e9<\/h3>\n\n\n\n<p>Pour une plus grande flexibilit\u00e9, <code>activeStyle<\/code> vous permet de d\u00e9finir des styles en ligne pour le lien actif, offrant ainsi une personnalisation encore plus granulaire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';\n\nfunction App() {\n  return (\n    <Router>\n      <nav>\n        <NavLink exact to=\"\/\" activeStyle={{ fontWeight: 'bold', color: 'green' }}>Accueil<\/NavLink>\n        <NavLink to=\"\/about\" activeStyle={{ fontWeight: 'bold', color: 'green' }}>\u00c0 propos<\/NavLink>\n        <NavLink to=\"\/contact\" activeStyle={{ fontWeight: 'bold', color: 'green' }}>Contact<\/NavLink>\n      <\/nav>\n      <Route path=\"\/\" exact component={Home} \/>\n      <Route path=\"\/about\" component={About} \/>\n      <Route path=\"\/contact\" component={Contact} \/>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser un Composant de Style pour les NavLinks<\/h3>\n\n\n\n<p>Pour g\u00e9rer le style des NavLinks de mani\u00e8re plus organis\u00e9e, vous pouvez cr\u00e9er un composant charg\u00e9 sp\u00e9cifiquement du style des liens :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { NavLink } from 'react-router-dom';\n\nconst StyledNavLink = ({ to, children }) => {\n  return (\n    <NavLink\n      to={to}\n      exact\n      style={{ margin: '10px', textDecoration: 'none' }}\n      activeStyle={{ fontWeight: 'bold', color: 'purple' }}\n    >\n      {children}\n    <\/NavLink>\n  );\n};\n\nexport default StyledNavLink;\n<\/code><\/pre>\n\n\n\n<p>Et utilisez ce composant <code>StyledNavLink<\/code> \u00e0 l&rsquo;int\u00e9rieur de votre application :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route } from 'react-router-dom';\nimport StyledNavLink from '.\/StyledNavLink';\n\nfunction App() {\n  return (\n    <Router>\n      <nav>\n        <StyledNavLink to=\"\/\">Accueil<\/StyledNavLink>\n        <StyledNavLink to=\"\/about\">\u00c0 propos<\/StyledNavLink>\n        <StyledNavLink to=\"\/contact\">Contact<\/StyledNavLink>\n      <\/nav>\n      <Route path=\"\/\" exact component={Home} \/>\n      <Route path=\"\/about\" component={About} \/>\n      <Route path=\"\/contact\" component={Contact} \/>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le Style Lien Actuel NavLink React<\/h2>\n\n\n\n<p>La personnalisation dynamique des <strong>NavLinks<\/strong> avec React et <code>react-router-dom<\/code> permet d\u2019am\u00e9liorer l\u2019exp\u00e9rience utilisateur en rendant la navigation plus intuitive et visuellement attrayante. En utilisant les propri\u00e9t\u00e9s <code>activeClassName<\/code> et <code>activeStyle<\/code>, ou m\u00eame un composant d\u00e9di\u00e9, vous pouvez facilement styliser vos liens afin de mieux guider vos utilisateurs. Pour approfondir vos connaissances, explorez nos diff\u00e9rents tutoriels tels que <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">Qu&rsquo;est-ce que React?<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\">Meilleurs logiciels pour d\u00e9velopper avec React<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">Utiliser les fonctions fl\u00e9ch\u00e9es en JavaScript pour React<\/a>.<\/p>\n\n\n<p>Pour aller encore plus loin dans l&rsquo;apprentissage de React et Redux, d\u00e9couvrez notre <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\">guide complet sur Redux<\/a> et des exercices sur <a href=\"https:\/\/wikiform.fr\/codespace\/exercices-s-ameliorer-react-guide\">comment s&rsquo;am\u00e9liorer avec React<\/a>. Vous pouvez \u00e9galement vous lancer dans la cr\u00e9ation de projets concrets avec notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">tutoriel sur la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>.\n\nPour encore plus de ressources sur React, <a href=\"https:\/\/reactjs.org\" target=\"_blank\" rel=\"nofollow noopener\">visitez le site officiel de React<\/a> ou <a href=\"https:\/\/web.dev\/react\/\" target=\"_blank\" rel=\"nofollow noopener\">consultez les guides sur Web.dev<\/a> pour des astuces avanc\u00e9es. Engagez-vous dans les projets open source disponibles sur <a href=\"https:\/\/github.com\/facebook\/react\" target=\"_blank\" rel=\"nofollow noopener\">le d\u00e9p\u00f4t GitHub de React<\/a> pour une exp\u00e9rience pratique.<\/p>\n\n<!-- Prenez avantage de notre offre sp\u00e9ciale Learnify -->\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 REDUX et REACT\" title=\"\">\n<\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Style Lien Actuel NavLink React est une comp\u00e9tence indispensable pour tout d\u00e9veloppeur front-end cherchant \u00e0 optimiser l&rsquo;exp\u00e9rience utilisateur sur une application React. Dans cet&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6170","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\/6170","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=6170"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6170\/revisions"}],"predecessor-version":[{"id":6171,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6170\/revisions\/6171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3163"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}