{"id":6178,"date":"2025-08-11T11:55:00","date_gmt":"2025-08-11T11:55:00","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/rediriger-utilisateur-sous-composant-react\/"},"modified":"2025-08-11T11:55:06","modified_gmt":"2025-08-11T11:55:06","slug":"rediriger-utilisateur-sous-composant-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/rediriger-utilisateur-sous-composant-react\/","title":{"rendered":"15.11 Rediriger un Utilisateur dans un Sous-Composant React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Rediriger Utilisateur dans un Sous-Composant React<\/strong> est une t\u00e2che courante mais essentielle pour la navigation et la gestion de l&rsquo;\u00e9tat dans les applications React. Comprendre comment impl\u00e9menter des redirections dans les sous-composants React peut am\u00e9liorer significativement l&rsquo;exp\u00e9rience utilisateur et la fluidit\u00e9 de votre application. <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que React ?<\/a> Explorons ensemble cette technique avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Redirection Utilisateur Sous-Composant 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\/706139993?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 sur React 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\/ma\u00eetriser-react\/152\" 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\/ma\u00eetriser-react\/152\" 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-expert-react\/155')\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 React, rediriger un utilisateur implique souvent l&rsquo;utilisation de biblioth\u00e8ques comme <code>react-router-dom<\/code>. <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">D\u00e9couvrez les diff\u00e9rences entre Single Page et Multi Page avec React.<\/a> Cela est particuli\u00e8rement vrai lorsque l&rsquo;on souhaite g\u00e9rer des routes et naviguer entre diff\u00e9rentes vues. Utiliser des routes dans un sous-composant est une pratique courante lorsqu&rsquo;on d\u00e9veloppe des applications modulares.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de <code>react-router-dom<\/code><\/h3>\n\n\n\n<p>Pour commencer, vous devez installer <code>react-router-dom<\/code> si ce n&rsquo;est pas d\u00e9j\u00e0 fait dans votre projet :<\/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 les Routes de Base<\/h3>\n\n\n\n<p>Une fois <code>react-router-dom<\/code> install\u00e9, vous pouvez configurer votre routeur principal dans votre application. Voici une structure de base :<\/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 HomePage from '.\/components\/HomePage';\nimport AboutPage from '.\/components\/AboutPage';\nimport UserPage from '.\/components\/UserPage';\n\nfunction App() {\n    return (\n        <Router>\n            <Switch>\n                <Route path=\"\/\" exact component={HomePage} \/>\n                <Route path=\"\/about\" component={AboutPage} \/>\n                <Route path=\"\/user\" component={UserPage} \/>\n            <\/Switch>\n        <\/Router>\n    );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Redirection dans un Sous-Composant<\/h3>\n\n\n\n<p>Supposons maintenant que vous souhaitez rediriger un utilisateur depuis un sous-composant apr\u00e8s un \u00e9v\u00e9nement, comme la soumission r\u00e9ussie d&rsquo;un formulaire. Vous pouvez utiliser le hook <code>useHistory<\/code> fourni par <code>react-router-dom<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { useHistory } from 'react-router-dom';\n\nfunction UserProfile() {\n    const history = useHistory();\n\n    const handleSubmit = (event) => {\n        event.preventDefault();\n        \/\/ Apr\u00e8s une soumission r\u00e9ussie\n        history.push('\/home');\n    };\n\n    return (\n        <div>\n            <h2>Profil Utilisateur<\/h2>\n            <form onSubmit={handleSubmit}>\n                <button type=\"submit\">Soumettre<\/button>\n            <\/form>\n        <\/div>\n    );\n}\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Redirection Conditionnelle<\/h3>\n\n\n\n<p>Dans certaines situations, vous voudrez peut-\u00eatre rediriger l&rsquo;utilisateur uniquement si certaines conditions sont remplies. Cela peut \u00eatre fait en utilisant un \u00e9tat ou une condition logique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport { Redirect } from 'react-router-dom';\n\nfunction Login() {\n    const [isLoggedIn, setIsLoggedIn] = useState(false);\n\n    const login = () => {\n        \/\/ Logique d'authentification\n        setIsLoggedIn(true);\n    };\n\n    if (isLoggedIn) {\n        return <Redirect to=\"\/dashboard\" \/>;\n    }\n\n    return (\n        <div>\n            <h2>Page de Connexion<\/h2>\n            <button onClick={login}>Se connecter<\/button>\n        <\/div>\n    );\n}\n\nexport default Login;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La redirection d&rsquo;utilisateur dans un sous-composant React est une technique courante pour g\u00e9rer la navigation et l\u2019exp\u00e9rience utilisateur. En faisant bon usage de <code>react-router-dom<\/code>, vous pouvez non seulement simplifier votre logique de navigation mais aussi am\u00e9liorer la maintenabilit\u00e9 de votre code. Pour plus de tutoriaux, <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">d\u00e9couvrez les extensions indispensables pour React<\/a> et d&rsquo;autres <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">nouveaut\u00e9s JavaScript essentielles pour React<\/a>. Pour apprendre \u00e0 int\u00e9grer un routeur dans vos projets, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/integrer-un-routeur-react\" target=\"_blank\" rel=\"noopener\">guide d\u00e9taill\u00e9<\/a>.<\/p>\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\"><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 Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Rediriger Utilisateur dans un Sous-Composant React est une t\u00e2che courante mais essentielle pour la navigation et la gestion de l&rsquo;\u00e9tat dans les applications React&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":3267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6178","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\/6178","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=6178"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6178\/revisions"}],"predecessor-version":[{"id":6179,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6178\/revisions\/6179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3267"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}