{"id":6176,"date":"2025-08-04T11:53:58","date_gmt":"2025-08-04T11:53:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/rediriger-utilisateur-directement-react\/"},"modified":"2025-08-04T11:54:04","modified_gmt":"2025-08-04T11:54:04","slug":"rediriger-utilisateur-directement-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/rediriger-utilisateur-directement-react\/","title":{"rendered":"15.10 Rediriger un Utilisateur Directement en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Rediriger Utilisateur React<\/strong> est une technique essentielle pour g\u00e9rer la navigation et am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur dans vos applications web. Comprendre comment configurer les redirections en React avec React Router peut consid\u00e9rablement am\u00e9liorer la fluidit\u00e9 et la logique de vos applications. D\u00e9couvrons comment cela fonctionne et comment l&rsquo;impl\u00e9menter avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>redirectionnement des utilisateurs 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\/706139918?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Dans le d\u00e9veloppement d&rsquo;applications React, il est souvent n\u00e9cessaire de rediriger les utilisateurs d&rsquo;une page vers une autre en r\u00e9ponse \u00e0 certaines actions, telles que la soumission d&rsquo;un formulaire r\u00e9ussi ou les restrictions d&rsquo;acc\u00e8s aux pages. La biblioth\u00e8que <code>React Router<\/code> est l&rsquo;outil standard pour g\u00e9rer les routes et les redirections dans React.<\/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, vous devez d&rsquo;abord l&rsquo;installer dans votre projet. Utilisez npm ou yarn pour l&rsquo;ajouter \u00e0 votre projet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Avec npm\nnpm install react-router-dom\n\n# Avec yarn\nyarn add react-router-dom\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer les Routes et Redirections<\/h3>\n\n\n\n<p>Une fois React Router install\u00e9, vous pouvez configurer les routes de votre application. Voici un exemple de configuration de base avec plusieurs routes et une redirection :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport About from '.\/components\/About';\nimport Dashboard from '.\/components\/Dashboard';\n\nfunction App() {\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={Home} \/>\n        <Route path=\"\/about\" component={About} \/>\n        <Route path=\"\/dashboard\" component={Dashboard} \/>\n        \n        {\/* Redirection vers la page d'accueil si aucune route ne correspond *\/}\n        <Redirect to=\"\/\" \/>\n      <\/Switch>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Redirection Automatique apr\u00e8s une Action<\/h3>\n\n\n\n<p>Il est courant de rediriger un utilisateur apr\u00e8s une action, comme une connexion r\u00e9ussie. La fonction <code>useHistory<\/code> fournie par React Router vous permet de manipuler l&rsquo;historique des navigations et de programmer des redirections. Pour en savoir plus sur l&rsquo;utilisation des fonctions fl\u00e9ch\u00e9es dans JavaScript avec React, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">guide d\u00e9taill\u00e9 sur les fonctions fl\u00e9ch\u00e9es<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { useHistory } from 'react-router-dom';\n\nfunction Login() {\n  const history = useHistory();\n  \n  const handleLogin = () => {\n    \/\/ Effectuer l'authentification...\n    \n    \/\/ Redirection vers le tableau de bord apr\u00e8s connexion r\u00e9ussie\n    history.push('\/dashboard');\n  };\n\n  return (\n    <div>\n      <h2>Page de Connexion<\/h2>\n      <button onClick={handleLogin}>Connexion<\/button>\n    <\/div>\n  );\n}\n\nexport default Login;\n<\/code><\/pre>\n\n\n<p>Apprendre \u00e0 configurer vos routes devient essentiel, surtout si vous utilisez <a href=\"https:\/\/wikiform.fr\/codespace\/proteger-nom-actions-redux-guide\">Redux pour g\u00e9rer vos donn\u00e9es<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Conditions de Redirection avec <code>&lt;Redirect&gt;<\/code><\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement configurer des redirections conditionnelles en utilisant le composant <code>&lt;Redirect&gt;<\/code> directement dans votre composant de rendu :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport { Redirect } from 'react-router-dom';\n\nfunction ProtectedRoute({ isAuthenticated }) {\n  if (!isAuthenticated) {\n    return <Redirect to=\"\/login\" \/>;\n  }\n\n  return (\n    <div>\n      <h2>Acc\u00e8s Prot\u00e9g\u00e9<\/h2>\n      <p>Bienvenue dans la section s\u00e9curis\u00e9e de l'application.<\/p>\n    <\/div>\n  );\n}\n\nexport default ProtectedRoute;\n<\/code><\/pre>\n\n\n<p>Pour comprendre comment int\u00e9grer efficacement les redirections conditionnelles, vous pouvez explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\">article sur les conditions ternaires<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le Redirection Utilisateur React<\/h2>\n\n\n\n<p>Le <strong>redirectionnement en React<\/strong> avec React Router est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur travaillant sur des applications web modernes. Cela permet d&rsquo;am\u00e9liorer la navigation et de fournir une exp\u00e9rience utilisateur fluide et intuitive. En utilisant les outils et techniques que nous avons explor\u00e9s, vous pouvez g\u00e9rer efficacement les flux de navigation et int\u00e9grer des redirections sans effort. Continuez \u00e0 exp\u00e9rimenter avec React Router pour ma\u00eetriser pleinement la gestion des routes et des redirections dans vos applications. D\u00e9couvrez plus sur la <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-fonctionnement-redux\">compr\u00e9hension de Redux<\/a> pour compl\u00e9menter vos comp\u00e9tences.<\/p>\n\n\n\n<div style=\"margin-top: 20px;\">\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: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold;\" rel=\"noopener\">D\u00e9couvrez notre cours complet sur React et Redux<\/a>\n<\/div>\n\n\n<!-- Add the promotional banner -->\n\n<div style=\"margin-top: 20px; text-align: center;\">\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\" style=\"max-width: 100%; height: auto;\" title=\"\">\n  <\/a>\n<\/div>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Rediriger Utilisateur React est une technique essentielle pour g\u00e9rer la navigation et am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur dans vos applications web. Comprendre comment configurer les redirections&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6176","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\/6176","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=6176"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6176\/revisions"}],"predecessor-version":[{"id":6177,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6176\/revisions\/6177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3266"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}