{"id":6158,"date":"2025-05-26T11:54:15","date_gmt":"2025-05-26T11:54:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/plusieurs-pages-application-react-guide\/"},"modified":"2025-05-26T11:54:20","modified_gmt":"2025-05-26T11:54:20","slug":"plusieurs-pages-application-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/plusieurs-pages-application-react-guide\/","title":{"rendered":"15.1 Plusieurs Pages dans une Application React : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Plusieurs Pages Application React<\/strong> sont essentielles pour structurer des applications complexes et offrir une navigation fluide \u00e0 l&rsquo;utilisateur. Ce guide vous expliquera comment cr\u00e9er et g\u00e9rer plusieurs pages dans une application React en utilisant React Router, et vous fournira des conseils pratiques pour rendre votre application plus dynamique et interactive. En savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que React, introduction et avantages<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au Routage dans une Application 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\/706138403?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  <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  <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>Le routage en React est un moyen de naviguer entre diff\u00e9rentes vues de l&rsquo;application. React Router est la biblioth\u00e8que de choix pour impl\u00e9menter le routage en React, permettant ainsi de g\u00e9rer les URLs de mani\u00e8re flexible et efficace. Commen\u00e7ons par installer React Router, puis d\u00e9couvrons comment l&rsquo;utiliser pour cr\u00e9er une application multi-pages. Vous pouvez \u00e9galement d\u00e9couvrir les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">diff\u00e9rences entre les applications \u00e0 page unique et multi-pages dans React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installer React Router<\/h3>\n\n\n\n<p>Pour utiliser React Router, commencez par l&rsquo;installer dans votre projet. Vous pouvez le faire en utilisant npm ou yarn :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install react-router-dom<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er les Routes de l&rsquo;Application<\/h3>\n\n\n\n<p>Une fois React Router install\u00e9, vous pouvez commencer \u00e0 d\u00e9finir vos routes. Voici comment cr\u00e9er un ensemble basique de routes :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nconst Home = () => &lt;h2&gt;Page d'accueil&lt;\/h2&gt;;\nconst About = () => &lt;h2&gt;\u00c0 propos&lt;\/h2&gt;;\nconst Contact = () => &lt;h2&gt;Contact&lt;\/h2&gt;;\n\nfunction App() {\n  return (\n    &lt;Router&gt;\n      &lt;Switch&gt;\n        &lt;Route path=\"\/\" exact component={Home} \/&gt;\n        &lt;Route path=\"\/about\" component={About} \/&gt;\n        &lt;Route path=\"\/contact\" component={Contact} \/&gt;\n      &lt;\/Switch&gt;\n    &lt;\/Router&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Liens de Navigation<\/h3>\n\n\n\n<p>Pour permettre aux utilisateurs de naviguer entre les pages, vous pouvez cr\u00e9er des liens en utilisant le composant <code>Link<\/code> de React Router :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Link } from 'react-router-dom';\n\nfunction Navigation() {\n  return (\n    &lt;nav&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;Link to=\"\/\"&gt;Accueil&lt;\/Link&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;Link to=\"\/about\"&gt;\u00c0 propos&lt;\/Link&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;Link to=\"\/contact\"&gt;Contact&lt;\/Link&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les Pages 404<\/h3>\n\n\n\n<p>Il est important de g\u00e9rer les routes non d\u00e9finies pour offrir une bonne exp\u00e9rience utilisateur. Vous pouvez ajouter une page 404 personnalis\u00e9e dans votre configuration de routage :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const NotFound = () => &lt;h2&gt;Page non trouv\u00e9e&lt;\/h2&gt;;\n\nfunction App() {\n  return (\n    &lt;Router&gt;\n      &lt;Switch&gt;\n        &lt;Route path=\"\/\" exact component={Home} \/&gt;\n        &lt;Route path=\"\/about\" component={About} \/&gt;\n        &lt;Route path=\"\/contact\" component={Contact} \/&gt;\n        &lt;Route component={NotFound} \/&gt;\n      &lt;\/Switch&gt;\n    &lt;\/Router&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Routage<\/h3>\n\n\n\n<p>Pour enrichir votre application, vous pouvez utiliser des fonctionnalit\u00e9s avanc\u00e9es de React Router telles que le routage dynamique, les chemins imbriqu\u00e9s, et la protection des routes. Il est aussi b\u00e9n\u00e9fique de savoir <a href=\"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\" target=\"_blank\" rel=\"noopener\">se lancer dans le d\u00e9veloppement React avec une introduction<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Routage Dynamique<\/h4>\n\n\n\n<p>Le routage dynamique est utile lorsque vous souhaitez charger des composants bas\u00e9s sur des param\u00e8tres ou des segments de chemin variables :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const UserProfile = ({ match }) => &lt;h2&gt;Profil utilisateur: {match.params.username}&lt;\/h2&gt;;\n\nfunction App() {\n  return (\n    &lt;Router&gt;\n      &lt;Switch&gt;\n        \/\/ More routes...\n        &lt;Route path=\"\/user\/:username\" component={UserProfile} \/&gt;\n      &lt;\/Switch&gt;\n    &lt;\/Router&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Protection des Routes<\/h4>\n\n\n\n<p>Pour prot\u00e9ger certaines routes et ne les rendre accessibles qu&rsquo;\u00e0 des utilisateurs authentifi\u00e9s, vous pouvez utiliser une logique de protection de routes :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const PrivateRoute = ({ component: Component, ...rest }) => (\n  &lt;Route\n    {...rest}\n    render={props =>\n      isAuthenticated ? (\n        &lt;Component {...props} \/&gt;\n      ) : (\n        &lt;Redirect to=\"\/login\" \/&gt;\n      )\n    }\n  \/&gt;\n);\n\nfunction App() {\n  return (\n    &lt;Router&gt;\n      &lt;Switch&gt;\n        \/\/ More routes...\n        &lt;PrivateRoute path=\"\/profile\" component={UserProfile} \/&gt;\n      &lt;\/Switch&gt;\n    &lt;\/Router&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Navigation Conditionnelle<\/h4>\n\n\n\n<p>React Router permet \u00e9galement une navigation conditionnelle pour rediriger les utilisateurs en fonction d&rsquo;\u00e9v\u00e9nements ou d&rsquo;actions sp\u00e9cifiques.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useHistory } from 'react-router-dom';\n\nfunction SomeComponent() {\n  const history = useHistory();\n\n  const handleClick = () => {\n    \/\/ Some logic...\n    history.push('\/new-path');\n  };\n\n  return (\n    &lt;button onClick={handleClick}&gt;Rediriger&lt;\/button&gt;\n  );\n}\n<\/code><\/pre>\n\n\n<p>Vous pouvez approfondir vos connaissances sur <a href=\"https:\/\/wikiform.fr\/codespace\/components-function-vs-class\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre les composants par classe et fonction en React<\/a> pour un meilleur d\u00e9veloppement.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation de <strong>plusieurs pages dans une application React<\/strong> via React Router enrichit consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur. Cela permet une meilleur organisation de l&rsquo;application et une navigation intuitive. Pour aller plus loin dans la personnalisation et l&rsquo;optimisation de vos applications React, explorez des ressources comme le <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">site officiel de React<\/a>, qui offre une documentation exhaustive. Pour apprendre davantage sur les bonnes pratiques de React Router, consid\u00e9rez les cours en ligne disponibles sur <a href=\"https:\/\/www.pluralsight.com\/\" target=\"_blank\" rel=\"noopener\">Pluralsight<\/a>. D\u00e9couvrez \u00e9galement pourquoi utiliser <a href=\"https:\/\/wikiform.fr\/codespace\/pourquoi-utiliser-let-const-javascript-react\" target=\"_blank\" rel=\"noopener\">let et const en JavaScript<\/a> pour am\u00e9liorer votre utilisation de React.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Promotion Img Redux-React -->\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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Plusieurs Pages Application React sont essentielles pour structurer des applications complexes et offrir une navigation fluide \u00e0 l&rsquo;utilisateur. Ce guide vous expliquera comment cr\u00e9er&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3242,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6158","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\/6158","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=6158"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6158\/revisions"}],"predecessor-version":[{"id":6159,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6158\/revisions\/6159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3242"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}