{"id":52602,"date":"2023-05-19T12:53:47","date_gmt":"2023-05-19T10:53:47","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=52602&#038;post_type=knowledgebase&#038;preview_id=52602"},"modified":"2025-10-01T21:44:17","modified_gmt":"2025-10-01T19:44:17","slug":"attempted-import-error-switch-is-not-exported-from-react-router-dom","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","title":{"rendered":"Zo los je de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op"},"content":{"rendered":"<p>React Router is een populaire routing bibliotheek die in <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> toepassingen wordt gebruikt om navigatie te beheren en naadloze routing functionaliteit te bieden. Maar zoals bij elke bibliotheek kunnen er in de loop der tijd updates en wijzigingen plaatsvinden, wat tot fouten kan leiden omdat sommige functies afgeschreven raken.<\/p>\n<p>Een veel voorkomende fout die je kunt tegenkomen bij het implementeren van routing in React toepassingen is de &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; fout.<\/p>\n<p>Deze fout treedt op wanneer je een upgrade uitvoert van een oudere versie van <a href=\"https:\/\/reactrouter.com\/en\/main\" target=\"_blank\" rel=\"noopener noreferrer\">React Router<\/a> naar een nieuwere versie (momenteel v6) zonder rekening te houden met sommige afgeschreven componenten zoals <code>&lt;Switch&gt;<\/code>.<\/p>\n<p>In dit artikel leer je de oorzaken van deze fout en hoe je hem kunt verhelpen, zodat je een soepele routing en navigatie in je React applicaties krijgt.<\/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>Wat veroorzaakt de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221;?<\/h2>\n<p>In React Router versie 5 en eerder werd de component <code>&lt;Switch&gt;<\/code> <a href=\"https:\/\/v5.reactrouter.com\/web\/api\/Switch\" target=\"_blank\" rel=\"noopener noreferrer\">gebruikt om alle routes in je React applicatie in te pakken<\/a>. In React Router versie 6 is de <code>&lt;Switch&gt;<\/code> component <a href=\"https:\/\/reactrouter.com\/en\/main\/upgrading\/v5#upgrade-all-switch-elements-to-routes\" target=\"_blank\" rel=\"noopener noreferrer\">afgeschreven en vervangen<\/a> door de <code>&lt;Routes&gt;<\/code> component.<\/p>\n<p>De <code>&lt;Routes&gt;<\/code> component in React Router v6 biedt een meer declaratieve en flexibele benadering van routing in vergelijking met de afgeschreven <code>&lt;Switch&gt;<\/code> component.<\/p>\n<p>Als je dus onlangs een upgrade hebt uitgevoerd naar React Router v6 (of een nieuwere versie) en je probeert nog steeds de afgeschreven <code>&lt;Switch&gt;<\/code> component te gebruiken, zul je de &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; fout tegenkomen.<\/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=\"\"'Switch' is not exported from 'react-router-dom'\" bericht fout\" width=\"1600\" height=\"255\"><figcaption class=\"wp-caption-text\">&#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221;<\/figcaption><\/figure>\n\n<h2>2 manieren om de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op te lossen<\/h2>\n<p>Deze fout kan op twee manieren worden opgelost, afhankelijk van de gewenste aanpak en eisen van je project. De twee manieren zijn als volgt:<\/p>\n<ul>\n<li>Gebruik &lt;Routes&gt; in plaats van &lt;Switch&gt;.<\/li>\n<li>Downgrade de <strong>react-router-dom<\/strong> versie naar 5 of lager<\/li>\n<\/ul>\n<h3>1. Gebruik &lt;Routes&gt; in plaats van &lt;Switch&gt;<\/h3>\n<p>Een manier om de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op te lossen is door <code>&lt;Switch&gt;<\/code> te vervangen door <code>&lt;Routes&gt;<\/code>.<\/p>\n<p>Laten we eens kijken naar een voorbeeld van hoe je je routing code kunt updaten van het gebruik van de afgeschreven <code>&lt;Switch&gt;<\/code> component in React Router versie 5 naar de nieuwe <code>&lt;Routes&gt;<\/code> component in React Router versie 6.<\/p>\n<p>In React Router versie 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>In de bovenstaande code gebruiken we de <code>&lt;Switch&gt;<\/code> component om onze routes in te pakken. In React Router versie 6 moeten we onze routing code echter bijwerken om de <code>&lt;Routes&gt;<\/code> component te gebruiken en de bijgewerkte <a href=\"https:\/\/kinsta.com\/nl\/blog\/microservices-versus-api\/\">API<\/a> te volgen.<\/p>\n<p>Hier zie je hoe hetzelfde voorbeeld eruit zou zien in React Router versie 6 en verder:<\/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>Zoals je ziet hebben we de <code>&lt;Switch&gt;<\/code> component vervangen door de <code>&lt;Routes&gt;<\/code> component, en elke <code>&lt;Route&gt;<\/code> wordt nu gedefinieerd met behulp van de <code>element<\/code> prop in plaats van de <code>component<\/code> prop.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>De <code>exact<\/code> prop is niet langer nodig in React Router versie 6, omdat dit het standaard gedrag is. Ook de <code>&lt;Route&gt;<\/code> component gebruikt niet langer <code>component={Home}<\/code> om de component toe te wijzen, maar gebruikt nu <code>element={&lt;Contact\/&gt;}<\/code>.<\/p>\n<\/aside>\n\n<h4>Voordelen van Routes ten opzichte van Switch in React Router v6<\/h4>\n<p>Met de release van React Router v6 heeft de introductie van de <code>&lt;Routes&gt;<\/code> component verschillende voordelen gebracht ten opzichte van de afgeschreven <code>&lt;Switch&gt;<\/code> component in eerdere versies.<\/p>\n<p>Laten we eens kijken naar enkele voordelen van het gebruik van <code>&lt;Routes&gt;<\/code> voor het afhandelen van routing logica in je React applicaties.<\/p>\n<h5>1. Verbeterde geneste routing<\/h5>\n<p><code>&lt;Routes&gt;<\/code> maakt verbeterde nested routeringsconfiguraties mogelijk in vergelijking met <code>&lt;Switch&gt;<\/code>. Met <code>&lt;Routes&gt;<\/code> kun je eenvoudig nested routes defini\u00ebren door <code>&lt;Route&gt;<\/code> componenten te nesten binnen andere <code>&lt;Route&gt;<\/code> componenten, waardoor het intu\u00eftiever en georganiseerder is om complexe routingstructuren te hanteren.<\/p>\n<p>Dit kan het beheer van routingslogica in grotere applicaties met meerdere niveaus van nested routes helpen vereenvoudigen.<\/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. Dynamische routematching<\/h5>\n<p><code>&lt;Routes&gt;<\/code> biedt meer flexibiliteit bij het dynamisch matchen en renderen van routes op basis van routeparameters. Dit maakt meer dynamische en gegevensgestuurde routing in je applicatie mogelijk.<\/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. Verbeterde foutafhandeling<\/h5>\n<p><code>&lt;Routes&gt;<\/code> biedt verbeterde foutafhandeling voor niet gevonden routes. Als een route niet wordt gevonden, geeft <code>&lt;Routes&gt;<\/code> automatisch een &#8220;Not found&#8221; component weer of een aangepaste foutcomponent die je kunt defini\u00ebren.<\/p>\n<p>Dit kan de gebruikerservaring helpen verbeteren door ongeldige URL&#8217;s of routes die niet bestaan in je applicaties netjes af te handelen.<\/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. Downgrade de react-router-dom versie naar 5 of lager<\/h3>\n<p>Als je liever <code>&lt;Switch&gt;<\/code> blijft gebruiken in je project, kun je de fout oplossen door je <strong>react-router-dom<\/strong> versie te downgraden naar 5 of lager.<\/p>\n<p>Dit kan een haalbare oplossing zijn als je een bestaand project hebt dat is gebouwd met een oudere versie van React Router. Je kunt dit doen door eerst de laatste versie van React router die je hebt ge\u00efnstalleerd te verwijderen met het onderstaande commando:<\/p>\n<pre><code class=\"language-bash\">npm uninstall react-router-dom<\/code><\/pre>\n<p>Je kunt dit commando nu gebruiken om de laatste major versie te installeren die de component &lt;Switch&gt; bevatte, namelijk versie 5.2.0:<\/p>\n<pre><code class=\"language-bash\">npm install react-router-dom@5.2.0<\/code><\/pre>\n\n<h2>Samenvatting<\/h2>\n<p>In dit artikel heb je geleerd over de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; in React en een paar manieren verkend om dit op te lossen. Je hebt ook de voordelen geleerd van het gebruik van het nieuwere <code>&lt;Routes&gt;<\/code> component boven het afgeschreven <code>&lt;Switch&gt;<\/code> component.<\/p>\n<p>Als je een nieuw project begint, is het aan te raden om altijd de nieuwste versie van React Router te gebruiken, omdat die aanzienlijke verbeteringen en voortdurende updates biedt.<\/p>\n<p>Stel echter dat je aan een bestaand project werkt, en niet de tijd hebt om je code uitgebreid bij te werken om de nieuwe React Router&#8217;s v6 syntaxis en componenten te gebruiken. Blijf in dat geval de oudere versie van React Router gebruiken die met jouw code werkt.<\/p>\n<p><em>Nu is het jouw beurt: Ben je dit probleem ooit tegengekomen? Hoe heb je het opgelost? Zijn er andere benaderingen die je hebt gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Router is een populaire routing bibliotheek die in React toepassingen wordt gebruikt om navigatie te beheren en naadloze routing functionaliteit te bieden. Maar zoals bij &#8230;<\/p>\n","protected":false},"author":287,"featured_media":52603,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871,908],"class_list":["post-52602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-react-fouten"],"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>Zo los je de fout &quot;&#039;Switch&#039; is not exported from &#039;react-router-dom&#039;&quot; op - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Deze gemakkelijk te volgen gids laat je twee manieren zien om de &#039;Switch&#039; is not exported from &#039;react-router-dom&#039;&quot; fout op te lossen.\" \/>\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\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo los je de fout &quot;&#039;Switch&#039; is not exported from &#039;react-router-dom&#039;&quot; op\" \/>\n<meta property=\"og:description\" content=\"Deze gemakkelijk te volgen gids laat je twee manieren zien om de &#039;Switch&#039; is not exported from &#039;react-router-dom&#039;&quot; fout op te lossen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-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\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T10:53:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:44:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Deze gemakkelijk te volgen gids laat je twee manieren zien om de &#039;Switch&#039; is not exported from &#039;react-router-dom&#039;&quot; fout op te lossen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo los je de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op\",\"datePublished\":\"2023-05-19T10:53:47+00:00\",\"dateModified\":\"2025-10-01T19:44:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\"},\"wordCount\":1008,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\",\"name\":\"Zo los je de fout \\\"'Switch' is not exported from 'react-router-dom'\\\" op - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg\",\"datePublished\":\"2023-05-19T10:53:47+00:00\",\"dateModified\":\"2025-10-01T19:44:17+00:00\",\"description\":\"Deze gemakkelijk te volgen gids laat je twee manieren zien om de 'Switch' is not exported from 'react-router-dom'\\\" fout op te lossen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React fouten\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/react-fouten\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo los je de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo los je de fout \"'Switch' is not exported from 'react-router-dom'\" op - Kinsta\u00ae","description":"Deze gemakkelijk te volgen gids laat je twee manieren zien om de 'Switch' is not exported from 'react-router-dom'\" fout op te lossen.","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\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo los je de fout \"'Switch' is not exported from 'react-router-dom'\" op","og_description":"Deze gemakkelijk te volgen gids laat je twee manieren zien om de 'Switch' is not exported from 'react-router-dom'\" fout op te lossen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-05-19T10:53:47+00:00","article_modified_time":"2025-10-01T19:44:17+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Deze gemakkelijk te volgen gids laat je twee manieren zien om de 'Switch' is not exported from 'react-router-dom'\" fout op te lossen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo los je de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op","datePublished":"2023-05-19T10:53:47+00:00","dateModified":"2025-10-01T19:44:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/"},"wordCount":1008,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","url":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","name":"Zo los je de fout \"'Switch' is not exported from 'react-router-dom'\" op - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg","datePublished":"2023-05-19T10:53:47+00:00","dateModified":"2025-10-01T19:44:17+00:00","description":"Deze gemakkelijk te volgen gids laat je twee manieren zien om de 'Switch' is not exported from 'react-router-dom'\" fout op te lossen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/attempted-import-error-featured.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React fouten","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/react-fouten\/"},{"@type":"ListItem","position":3,"name":"Zo los je de fout &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; op"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=52602"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52602\/revisions"}],"predecessor-version":[{"id":53300,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52602\/revisions\/53300"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52602\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/52603"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=52602"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=52602"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=52602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}