{"id":6206,"date":"2025-11-17T12:55:59","date_gmt":"2025-11-17T12:55:59","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/rediriger-article-n-existe-pas-react\/"},"modified":"2025-11-17T12:56:05","modified_gmt":"2025-11-17T12:56:05","slug":"rediriger-article-n-existe-pas-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/rediriger-article-n-existe-pas-react\/","title":{"rendered":"16.12 Rediriger si l&rsquo;Article n&rsquo;Existe Pas en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Article Non Existant React<\/strong> joue un r\u00f4le essentiel dans l&rsquo;am\u00e9lioration de l&rsquo;exp\u00e9rience utilisateur au sein d&rsquo;applications web dynamiques. Lorsqu&rsquo;un article demand\u00e9 n&rsquo;existe pas, rediriger correctement l&rsquo;utilisateur am\u00e9liore l&rsquo;accessibilit\u00e9 et maintient une navigation fluide. Apprenons \u00e0 configurer cette fonctionnalit\u00e9 en React avec des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Article Non Existant React<\/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\/706144450?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                    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>La gestion des routes non trouv\u00e9es dans une application React est cruciale pour une exp\u00e9rience utilisateur fluide. Lorsqu&rsquo;un utilisateur essaye d&rsquo;acc\u00e9der \u00e0 un article inexistant, une redirection appropri\u00e9e vers une page \u00ab\u00a0404\u00a0\u00bb ou une autre page pertinente peut l&rsquo;orienter utilement et l&rsquo;informer correctement. D\u00e9couvrez plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">les diff\u00e9rences entre les applications single et multi-page<\/a> avec React pour mieux comprendre l&rsquo;int\u00e9gration de telles fonctionnalit\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer React Router pour la Redirection<\/h3>\n\n\n\n<p>Pour commencer, nous allons utiliser <a href=\"https:\/\/reactrouter.com\/\" target=\"_blank\" rel=\"noopener\">React Router<\/a>, une biblioth\u00e8que populaire pour la gestion des routes dans les applications React. Voici comment configurer une redirection si un article n&rsquo;existe pas. Vous pouvez en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">le cycle de vie d&rsquo;une application React<\/a> qui peut aussi influencer la gestion de la redirection :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';\nimport HomePage from '.\/HomePage';\nimport ArticlePage from '.\/ArticlePage';\nimport NotFoundPage from '.\/NotFoundPage';\n\nfunction App() {\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={HomePage} \/>\n        <Route path=\"\/article\/:id\" component={ArticlePage} \/>\n        <Route path=\"\/404\" component={NotFoundPage} \/>\n        <Redirect to=\"\/404\" \/>\n      <\/Switch>\n    <\/Router>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">V\u00e9rifier l&rsquo;Existence d&rsquo;un Article<\/h3>\n\n\n\n<p>Dans le composant <code>ArticlePage<\/code>, nous pouvons utiliser un effet pour v\u00e9rifier l&rsquo;existence de l&rsquo;article bas\u00e9 sur un identifiant. Si l&rsquo;article n&rsquo;existe pas, nous redirigeons l&rsquo;utilisateur. Voici comment proc\u00e9der, en se basant sur la m\u00e9thodologie des <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">extensions indispensables au d\u00e9veloppement React<\/a> pour g\u00e9rer les requ\u00eates API efficacement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\nimport { useParams, useHistory } from 'react-router-dom';\n\nfunction ArticlePage() {\n  const { id } = useParams();\n  const history = useHistory();\n  const [article, setArticle] = useState(null);\n\n  useEffect(() => {\n    const fetchArticle = async () => {\n      try {\n        const response = await fetch(`\/api\/articles\/${id}`);\n        if (!response.ok) {\n          throw new Error('Article not found');\n        }\n        const data = await response.json();\n        setArticle(data);\n      } catch (error) {\n        history.push('\/404');\n      }\n    };\n    fetchArticle();\n  }, [id, history]);\n\n  return article ? <div>{article.content}<\/div> : <p>Chargement...<\/p>;\n}\n\nexport default ArticlePage;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnaliser la Page 404<\/h3>\n\n\n\n<p>Une page 404 bien con\u00e7ue am\u00e9liore l&rsquo;exp\u00e9rience utilisateur en fournissant des liens utiles ou des suggestions pour revenir \u00e0 la navigation normale. Voici un exemple simple de la fa\u00e7on de personnaliser la page d&rsquo;erreur. Pour aller plus loin dans la personnalisation et la gestion des erreurs, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-erreurs-requetes-firebase-axios-react\">g\u00e9rer les erreurs des requ\u00eates Firebase et Axios dans React<\/a> :<\/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 NotFoundPage() {\n  return (\n    <div>\n      <h1>404<\/h1>\n      <p>D\u00e9sol\u00e9, la page que vous recherchez n'existe pas.<\/p>\n      <Link to=\"\/\">Retour \u00e0 l'accueil<\/Link>\n    <\/div>\n  );\n}\n\nexport default NotFoundPage;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explorer des Cas d&rsquo;Utilisation Avanc\u00e9s<\/h3>\n\n\n\n<p>Pour rendre votre application React encore plus robuste, vous pouvez \u00e9tendre la logique de redirection pour inclure des analyses d&rsquo;erreurs plus complexes ou des graphiques de recherche lorsqu&rsquo;un article est introuvable. Voici un exemple avanc\u00e9 de gestion des erreurs. Pour des manipulations plus pouss\u00e9es des composants, lisez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-composants-react\">la modification dynamique des composants React<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\nimport { useParams, useHistory } from 'react-router-dom';\n\nfunction ArticlePage() {\n  const { id } = useParams();\n  const history = useHistory();\n  const [article, setArticle] = useState(null);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchArticle = async () => {\n      try {\n        const response = await fetch(`\/api\/articles\/${id}`);\n        if (!response.ok) {\n          setError('Article not found');\n          throw new Error('Article not found');\n        }\n        const data = await response.json();\n        setArticle(data);\n      } catch (error) {\n        history.push('\/404');\n      }\n    };\n    fetchArticle();\n  }, [id, history]);\n\n  return (\n    <div>\n      {error ? <div>{error}<\/div> : <div>{article ? article.content : 'Chargement...'}<\/div>}\n    <\/div>\n  );\n}\n\nexport default ArticlePage;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion et Sujets Connexes<\/h2>\n\n\n\n<p>Int\u00e9grer une redirection lorsque des articles sont inexistants en React am\u00e9liore grandement l&rsquo;exp\u00e9rience utilisateur en accroissant la fluidit\u00e9 et la convivialit\u00e9 de l&rsquo;application. En combinant React Router et une logique claire, vous pouvez facilement guider les utilisateurs et maintenir leur satisfaction lors de la navigation sur votre site. Poursuivez votre exploration avec des fonctionnalit\u00e9s d&rsquo;application encore plus avanc\u00e9es pour tirer le meilleur parti de React et des patterns d&rsquo;applications. Pour approfondir ces concepts, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/rediriger-article-n-existe-pas-react\">la redirection d&rsquo;articles inexistants en React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/expert-react\/150\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/react-expert-banner.gif\" loading=\"lazy\" alt=\"Formation React Expert\" title=\"\"><\/a>\n\n\n\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\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation React et Redux\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Article Non Existant React joue un r\u00f4le essentiel dans l&rsquo;am\u00e9lioration de l&rsquo;exp\u00e9rience utilisateur au sein d&rsquo;applications web dynamiques. Lorsqu&rsquo;un article demand\u00e9 n&rsquo;existe pas, rediriger&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3265,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6206","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\/6206","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=6206"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6206\/revisions"}],"predecessor-version":[{"id":6207,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6206\/revisions\/6207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3265"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}