{"id":69291,"date":"2023-05-19T11:48:45","date_gmt":"2023-05-19T10:48:45","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69291&#038;post_type=knowledgebase&#038;preview_id=69291"},"modified":"2025-10-01T20:43:10","modified_gmt":"2025-10-01T19:43:10","slug":"erreur-switch-is-not-exported-from-react-router-dom","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/","title":{"rendered":"Comment corriger l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; in React \u00bb"},"content":{"rendered":"<p>React Router est une biblioth\u00e8que de routage populaire utilis\u00e9e dans les applications <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> pour g\u00e9rer la navigation et fournir des fonctionnalit\u00e9s de routage transparentes. Cependant, comme pour toute biblioth\u00e8que, des mises \u00e0 jour et des changements peuvent survenir au fil du temps, ce qui peut entra\u00eener des erreurs car certaines fonctionnalit\u00e9s deviennent d\u00e9pr\u00e9ci\u00e9es.<\/p>\n<p>Une erreur courante que vous pouvez rencontrer lors de la mise en \u0153uvre du routage dans les applications React est l&rsquo;erreur \u00ab &lsquo;Switch&rsquo; is not exported from &lsquo;react-router-dom \u00bb.<\/p>\n<p>Cette erreur se produit lorsque vous passez d&rsquo;une ancienne version de <a href=\"https:\/\/reactrouter.com\/en\/main\" target=\"_blank\" rel=\"noopener noreferrer\">React Router<\/a> \u00e0 une version plus r\u00e9cente (actuellement v6) sans tenir compte de certains composants d\u00e9pr\u00e9ci\u00e9s comme <code>&lt;Switch&gt;<\/code>.<\/p>\n<p>Dans cet article, vous apprendrez les causes de cette erreur et comment la corriger, afin de garantir un routage et une navigation fluides dans vos applications React.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Quelles sont les causes de l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; \u00bb ?<\/h2>\n<p>Dans React Router version 5 et pr\u00e9c\u00e9dentes, le composant <code>&lt;Switch&gt;<\/code> <a href=\"https:\/\/v5.reactrouter.com\/web\/api\/Switch\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9tait utilis\u00e9 pour envelopper toutes les routes dans votre application React<\/a>. Dans la version 6 de React Router, le composant <code>&lt;Switch&gt;<\/code> a <a href=\"https:\/\/reactrouter.com\/en\/main\/upgrading\/v5#upgrade-all-switch-elements-to-routes\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9t\u00e9 supprim\u00e9 et remplac\u00e9<\/a> par le composant <code>&lt;Routes&gt;<\/code>.<\/p>\n<p>Le composant <code>&lt;Routes&gt;<\/code> de React Router v6 offre une approche plus d\u00e9clarative et plus flexible du routage que le composant <code>&lt;Switch&gt;<\/code>, qui est obsol\u00e8te.<\/p>\n<p>Par cons\u00e9quent, si vous avez r\u00e9cemment mis \u00e0 jour vers React Router v6 (ou une version plus r\u00e9cente) et que vous essayez toujours d&rsquo;utiliser le composant obsol\u00e8te <code>&lt;Switch&gt;<\/code>, vous rencontrerez l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; \u00bb.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/switch-react-router-error.jpg\" alt=\"Message d'erreur Switch' is not exported from 'react-router-dom\" width=\"1600\" height=\"255\"><figcaption class=\"wp-caption-text\">Message d&rsquo;erreur Switch&rsquo; is not exported from &lsquo;react-router-dom<\/figcaption><\/figure>\n\n<h2>2 fa\u00e7ons de corriger l&rsquo;erreur \u00ab Switch is not exported from \u2018react-router-dom\u2019 in React \u00bb<\/h2>\n<p>Cette erreur peut \u00eatre corrig\u00e9e de deux mani\u00e8res, en fonction de l&rsquo;approche souhait\u00e9e et des exigences de votre projet. Les deux m\u00e9thodes sont les suivantes :<\/p>\n<ul>\n<li>Utilisez &lt;Routes&gt; au lieu de &lt;Switch&gt;.<\/li>\n<li>R\u00e9trogradez la version de <strong>react-router-dom<\/strong> \u00e0 5 ou moins<\/li>\n<\/ul>\n<h3>1. Utilisez &lt;Routes&gt; au lieu de &lt;Switch&gt;.<\/h3>\n<p>Une fa\u00e7on de corriger l&rsquo;erreur \u00ab\u00a0\u00ab Switch&rsquo; is not exported from &lsquo;react-router-dom&rsquo; \u00bb est de remplacer <code>&lt;Switch&gt;<\/code> par <code>&lt;Routes&gt;<\/code>.<\/p>\n<p>Voyons un exemple de mise \u00e0 jour de votre code de routage, en passant du composant <code>&lt;Switch&gt;<\/code>, obsol\u00e8te dans React Router version 5, au nouveau composant <code>&lt;Routes&gt;<\/code> dans React Router version 6.<\/p>\n<p>Dans React Router version 5 :<\/p>\n<pre><code class=\"language-jsx\">import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport About from '.\/components\/About';\nimport Contact from '.\/components\/Contact';\n\nconst App = () =&gt; {\n  return (\n    &lt;Router&gt;\n      &lt;Switch&gt;\n        &lt;Route exact path=\"\/\" 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;<\/code><\/pre>\n<p>Dans le code ci-dessus, nous utilisons le composant <code>&lt;Switch&gt;<\/code> pour envelopper nos routes. Cependant, dans React Router version 6, nous devons mettre \u00e0 jour notre code de routage pour utiliser le composant <code>&lt;Routes&gt;<\/code> et suivre l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/micro-services-vs-api\/\">API<\/a> mise \u00e0 jour.<\/p>\n<p>Voici \u00e0 quoi ressemblerait le m\u00eame exemple dans React Router version 6 et suivantes :<\/p>\n<pre><code class=\"language-jsx\">import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport About from '.\/components\/About';\nimport Contact from '.\/components\/Contact';\n\nconst App = () =&gt; {\n  return (\n    &lt;Router&gt;\n      &lt;Routes&gt;\n        &lt;Route path=\"\/\" element={&lt;Home \/&gt;} \/&gt;\n        &lt;Route path=\"\/about\" element={&lt;About \/&gt;} \/&gt;\n        &lt;Route path=\"\/contact\" element={&lt;Contact \/&gt;} \/&gt;\n      &lt;\/Routes&gt;\n    &lt;\/Router&gt;\n  );\n};\n\nexport default App;<\/code><\/pre>\n<p>Comme vous pouvez le voir, nous avons remplac\u00e9 le composant <code>&lt;Switch&gt;<\/code> par le composant <code>&lt;Routes&gt;<\/code>, et chaque <code>&lt;Route&gt;<\/code> est d\u00e9sormais d\u00e9fini \u00e0 l&rsquo;aide de la propri\u00e9t\u00e9 <code>element<\/code> au lieu de la propri\u00e9t\u00e9 <code>component<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>La propri\u00e9t\u00e9 <code>exact<\/code> n&rsquo;est plus n\u00e9cessaire dans la version 6 de React Router, car il s&rsquo;agit du comportement par d\u00e9faut. De m\u00eame, le composant <code>&lt;Route&gt;<\/code> n&rsquo;utilise plus <code>component={Home}<\/code> pour affecter le composant, mais <code>element={&lt;Contact\/&gt;}<\/code>.<\/p>\n<\/aside>\n\n<h4>Avantages de Routes par rapport \u00e0 Switch dans React Router v6<\/h4>\n<p>Avec la sortie de React Router v6, l&rsquo;introduction du composant <code>&lt;Routes&gt;<\/code> a apport\u00e9 plusieurs avantages par rapport au composant <code>&lt;Switch&gt;<\/code>, qui \u00e9tait obsol\u00e8te dans les versions pr\u00e9c\u00e9dentes.<\/p>\n<p>Examinons les avantages de l&rsquo;utilisation de <code>&lt;Routes&gt;<\/code> pour g\u00e9rer la logique de routage dans vos applications React.<\/p>\n<h5>1. Routage imbriqu\u00e9 am\u00e9lior\u00e9<\/h5>\n<p>Le\u00a0 composant <code>&lt;Routes&gt;<\/code> permet d&rsquo;am\u00e9liorer les configurations de routage imbriqu\u00e9 par rapport \u00e0 <code>&lt;Switch&gt;<\/code>. Avec , vous pouvez d\u00e9finir facilement des itin\u00e9raires imbriqu\u00e9s en imbriquant des composants <code>&lt;Route&gt;<\/code> dans d&rsquo;autres composants <code>&lt;Route&gt;<\/code>, ce qui rend la gestion de structures de routage complexes plus intuitive et mieux organis\u00e9e.<\/p>\n<p>Cela peut simplifier la gestion de la logique de routage dans les grandes applications comportant plusieurs niveaux d&rsquo;itin\u00e9raires imbriqu\u00e9s.<\/p>\n<pre><code class=\"language-jsx\">&lt;Routes&gt;\n  &lt;Route path=\"\/\" element={&lt;Home \/&gt;} \/&gt;\n  &lt;Route path=\"\/about\" element={&lt;About \/&gt;}&gt;\n    &lt;Route path=\"\/team\" element={&lt;Team \/&gt;} \/&gt;\n    &lt;Route path=\"\/history\" element={&lt;History \/&gt;} \/&gt;\n  &lt;\/Route&gt;\n  &lt;Route path=\"\/contact\" element={&lt;Contact \/&gt;} \/&gt;\n&lt;\/Routes&gt;<\/code><\/pre>\n<h5>2. Correspondance dynamique des routes<\/h5>\n<p><code>&lt;Routes&gt;<\/code> offre une plus grande flexibilit\u00e9 dans la correspondance et le rendu des itin\u00e9raires de mani\u00e8re dynamique en fonction des param\u00e8tres de la route. Cela permet un routage plus dynamique et ax\u00e9 sur les donn\u00e9es dans votre application.<\/p>\n<pre><code class=\"language-jsx\">&lt;Routes&gt;\n  &lt;Route path=\"\/\" element={&lt;Home \/&gt;} \/&gt;\n  &lt;Route path=\"\/users\/:userId\" element={&lt;UserProfile \/&gt;} \/&gt;\n  &lt;Route path=\"\/products\/:productId\" element={&lt;ProductDetail \/&gt;} \/&gt;\n&lt;\/Routes&gt;<\/code><\/pre>\n<h5>3. Am\u00e9lioration de la gestion des erreurs<\/h5>\n<p><code>&lt;Routes&gt;<\/code> le site offre une meilleure gestion des erreurs pour les itin\u00e9raires non appari\u00e9s. Si un itin\u00e9raire n&rsquo;est pas trouv\u00e9, <code>&lt;Routes&gt;<\/code> affiche automatiquement un composant \u00ab Not Found \u00bb ou un composant d&rsquo;erreur personnalis\u00e9 que vous pouvez d\u00e9finir.<\/p>\n<p>Cela permet d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience de l&rsquo;utilisateur en g\u00e9rant de mani\u00e8re \u00e9l\u00e9gante les URL non valides ou les itin\u00e9raires qui n&rsquo;existent pas dans votre application.<\/p>\n<pre><code class=\"language-jsx\">&lt;Routes&gt;\n  &lt;Route path=\"\/\" element={&lt;Home \/&gt;} \/&gt;\n  &lt;Route path=\"\/about\" element={&lt;About \/&gt;} \/&gt;\n  {\/* Error route *\/}\n  &lt;Route path=\"*\" element={&lt;NotFound \/&gt;} \/&gt;\n&lt;\/Routes&gt;<\/code><\/pre>\n<h3>2. R\u00e9trograder la version de react-router-dom \u00e0 5 ou moins<\/h3>\n<p>Si vous pr\u00e9f\u00e9rez continuer \u00e0 utiliser <code>&lt;Switch&gt;<\/code> dans votre projet, vous pouvez corriger l&rsquo;erreur en r\u00e9trogradant la version de <strong>react-router-dom<\/strong> \u00e0 5 ou moins.<\/p>\n<p>Cette solution peut \u00eatre viable si vous avez un projet existant qui a \u00e9t\u00e9 construit en utilisant une version plus ancienne de React Router. Pour cela, d\u00e9sinstallez d&rsquo;abord la derni\u00e8re version de React Router que vous avez install\u00e9e \u00e0 l&rsquo;aide de la commande ci-dessous :<\/p>\n<pre><code class=\"language-bash\">npm uninstall react-router-dom<\/code><\/pre>\n<p>Vous pouvez maintenant utiliser cette commande pour installer la derni\u00e8re version majeure qui incluait le composant &lt;Switch&gt;, \u00e0 savoir la version 5.2.0 :<\/p>\n<pre><code class=\"language-bash\">npm install react-router-dom@5.2.0<\/code><\/pre>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Dans cet article, vous avez d\u00e9couvert l&rsquo;erreur \u00ab &lsquo;Switch&rsquo; is not exported from &lsquo;react-router-dom&rsquo; \u00bb dans React et explor\u00e9 quelques fa\u00e7ons de la corriger. Vous avez \u00e9galement appris les avantages de l&rsquo;utilisation du nouveau composant <code>&lt;Routes&gt;<\/code> par rapport au composant obsol\u00e8te <code>&lt;Switch&gt;<\/code>.<\/p>\n<p>Lorsque vous d\u00e9marrez un nouveau projet, il est recommand\u00e9 de toujours utiliser la derni\u00e8re version de React Router, car elle offre des am\u00e9liorations significatives et des mises \u00e0 jour continues.<\/p>\n<p>Cependant, supposons que vous travaillez sur un projet existant et que vous n&rsquo;avez pas le temps de mettre \u00e0 jour votre code en profondeur pour utiliser la nouvelle syntaxe et les nouveaux composants de React Router v6. Dans ce cas, continuez \u00e0 utiliser l&rsquo;ancienne version de React Router qui fonctionne avec votre code.<\/p>\n<p><em>\u00c0 vous de jouer : Avez-vous d\u00e9j\u00e0 rencontr\u00e9 ce probl\u00e8me ? Comment l&rsquo;avez-vous r\u00e9solu ? Avez-vous utilis\u00e9 d&rsquo;autres approches qui ne sont pas abord\u00e9es dans cet article ? Faites-nous en part dans les commentaires !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Router est une biblioth\u00e8que de routage populaire utilis\u00e9e dans les applications React pour g\u00e9rer la navigation et fournir des fonctionnalit\u00e9s de routage transparentes. Cependant, comme &#8230;<\/p>\n","protected":false},"author":287,"featured_media":69292,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1005,1004],"class_list":["post-69291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erreurs-react","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment corriger l&#039;erreur \u00ab Switch is not exported from &#039;react-router-dom&#039; in React \u00bb ? - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l&#039;erreur de tentative d&#039;importation : &#039;switch&#039; is not exported from &#039;react-router-dom&#039;.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment corriger l&#039;erreur \u00ab Switch is not exported from &#039;react-router-dom&#039; in React \u00bb\" \/>\n<meta property=\"og:description\" content=\"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l&#039;erreur de tentative d&#039;importation : &#039;switch&#039; is not exported from &#039;react-router-dom&#039;.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T10:48:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:43:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l&#039;erreur de tentative d&#039;importation : &#039;switch&#039; is not exported from &#039;react-router-dom&#039;.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment corriger l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; in React \u00bb\",\"datePublished\":\"2023-05-19T10:48:45+00:00\",\"dateModified\":\"2025-10-01T19:43:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\"},\"wordCount\":1133,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\",\"name\":\"Comment corriger l'erreur \u00ab Switch is not exported from 'react-router-dom' in React \u00bb ? - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg\",\"datePublished\":\"2023-05-19T10:48:45+00:00\",\"dateModified\":\"2025-10-01T19:43:10+00:00\",\"description\":\"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l'erreur de tentative d'importation : 'switch' is not exported from 'react-router-dom'.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erreurs React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/erreurs-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment corriger l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; in React \u00bb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment corriger l'erreur \u00ab Switch is not exported from 'react-router-dom' in React \u00bb ? - Kinsta\u00ae","description":"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l'erreur de tentative d'importation : 'switch' is not exported from 'react-router-dom'.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment corriger l'erreur \u00ab Switch is not exported from 'react-router-dom' in React \u00bb","og_description":"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l'erreur de tentative d'importation : 'switch' is not exported from 'react-router-dom'.","og_url":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-05-19T10:48:45+00:00","article_modified_time":"2025-10-01T19:43:10+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l'erreur de tentative d'importation : 'switch' is not exported from 'react-router-dom'.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment corriger l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; in React \u00bb","datePublished":"2023-05-19T10:48:45+00:00","dateModified":"2025-10-01T19:43:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/"},"wordCount":1133,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/","url":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/","name":"Comment corriger l'erreur \u00ab Switch is not exported from 'react-router-dom' in React \u00bb ? - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg","datePublished":"2023-05-19T10:48:45+00:00","dateModified":"2025-10-01T19:43:10+00:00","description":"Ce guide facile \u00e0 suivre vous montre deux fa\u00e7ons de corriger l'erreur de tentative d'importation : 'switch' is not exported from 'react-router-dom'.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/attempted-import-error-featured.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/erreur-switch-is-not-exported-from-react-router-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Erreurs React","item":"https:\/\/kinsta.com\/fr\/sujets\/erreurs-react\/"},{"@type":"ListItem","position":3,"name":"Comment corriger l&rsquo;erreur \u00ab Switch is not exported from &lsquo;react-router-dom&rsquo; in React \u00bb"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=69291"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69291\/revisions"}],"predecessor-version":[{"id":69310,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69291\/revisions\/69310"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69291\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/69292"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=69291"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=69291"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=69291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}