{"id":59589,"date":"2023-11-03T07:47:24","date_gmt":"2023-11-03T10:47:24","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=59589&#038;post_type=knowledgebase&#038;preview_id=59589"},"modified":"2025-10-01T17:00:48","modified_gmt":"2025-10-01T20:00:48","slug":"attempted-import-error-switch-is-not-exported-from-react-router-dom","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","title":{"rendered":"Como Corrigir o Erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d"},"content":{"rendered":"<p>O React Router \u00e9 uma biblioteca de roteamento popular usada em aplicativos <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> para gerenciar a navega\u00e7\u00e3o e fornecer funcionalidade de roteamento cont\u00ednua. No entanto, como acontece com qualquer biblioteca, atualiza\u00e7\u00f5es e altera\u00e7\u00f5es podem ocorrer ao longo do tempo, o que pode levar a erros porque alguns recursos se tornam obsoletos.<\/p>\n<p>Um erro comum que voc\u00ea pode encontrar ao implementar o roteamento em aplicativos React \u00e9 o erro &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221;.<\/p>\n<p>Este erro ocorre quando voc\u00ea atualiza de uma vers\u00e3o antiga do <a href=\"https:\/\/reactrouter.com\/en\/main\">React Router<\/a> para uma vers\u00e3o mais recente (atualmente v6) sem levar em conta alguns componentes obsoletos, como o <code>&lt;Switch&gt;<\/code>.<\/p>\n<p>Neste artigo, voc\u00ea aprender\u00e1 as causas desse erro e como corrigi-lo, garantindo o roteamento e a navega\u00e7\u00e3o suave em seu aplicativo 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>O que causa o erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d?<\/h2>\n<p>No React Router vers\u00e3o 5 e anteriores, o componente <code>&lt;Switch&gt;<\/code> <a href=\"https:\/\/v5.reactrouter.com\/web\/api\/Switch\" target=\"_blank\" rel=\"noopener noreferrer\">foi usado para envolver todas as rotas em seu aplicativo React<\/a>. Na vers\u00e3o 6 do React Router, o componente <code>&lt;Switch&gt;<\/code> foi <a href=\"https:\/\/reactrouter.com\/en\/main\/upgrading\/v5#upgrade-all-switch-elements-to-routes\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuado e substitu\u00eddo<\/a> pelo componente <code>&lt;Routes&gt;<\/code>.<\/p>\n<p>O componente <code>&lt;Routes&gt;<\/code> no React Router v6 oferece uma abordagem mais declarativa e flex\u00edvel para o roteamento em compara\u00e7\u00e3o com o componente <code>&lt;Switch&gt;<\/code>, que foi descontinuado.<\/p>\n<p>Portanto, se voc\u00ea tiver atualizado recentemente para o React Router v6 (ou uma vers\u00e3o mais recente) e ainda estiver tentando usar o componente <code>&lt;Switch&gt;<\/code> obsoleto, encontrar\u00e1 o erro &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221;.<\/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=\"\u201cSwitch is not exported from 'react-router-dom' in React\u201d.\" width=\"1600\" height=\"255\"><figcaption class=\"wp-caption-text\">\u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d.<\/figcaption><\/figure>\n\n<h2>2 maneiras de corrigir o erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d<\/h2>\n<p>Esse erro pode ser corrigido de duas maneiras, dependendo da abordagem desejada e dos requisitos do seu projeto. As duas maneiras s\u00e3o as seguintes:<\/p>\n<ul>\n<li>Usar &lt;Routes&gt; em vez de &lt;Switch&gt;<\/li>\n<li>Fazer downgrade da vers\u00e3o do <strong>react-router-dom<\/strong> para 5 ou inferior<\/li>\n<\/ul>\n<h3>1. Use &lt;Routes&gt; em vez de &lt;Switch&gt;<\/h3>\n<p>Uma maneira de corrigir o erro &#8220;&#8216;Switch&#8217; is not exported from &#8216;react-router-dom'&#8221; \u00e9 substituir <code>&lt;Switch&gt;<\/code> por <code>&lt;Routes&gt;<\/code>.<\/p>\n<p>Vamos dar uma olhada em um exemplo de como atualizar seu c\u00f3digo de roteamento usando o componente obsoleto <code>&lt;Switch&gt;<\/code> na vers\u00e3o 5 do React Router para o novo componente <code>&lt;Routes&gt;<\/code> na vers\u00e3o 6 do React Router.<\/p>\n<p>No React Router vers\u00e3o 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>No c\u00f3digo acima, estamos usando o componente <code>&lt;Switch&gt;<\/code> para envolver nossas rotas. No entanto, na vers\u00e3o 6 do React Router, precisamos atualizar nosso c\u00f3digo de roteamento para usar o componente <code>&lt;Routes&gt;<\/code> e seguir a <a href=\"https:\/\/kinsta.com\/pt\/blog\/microservicos-vs-api\/\">API<\/a> atualizada.<\/p>\n<p>Veja como o mesmo exemplo ficaria no React Router vers\u00e3o 6 e posteriores:<\/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>Como voc\u00ea pode ver, substitu\u00edmos o componente <code>&lt;Switch&gt;<\/code> pelo componente <code>&lt;Routes&gt;<\/code>, e cada <code>&lt;Route&gt;<\/code> agora \u00e9 definido usando a propriedade <code>element<\/code> em vez da propriedade <code>component<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A propriedade <code>exact<\/code> n\u00e3o \u00e9 mais necess\u00e1ria no React Router vers\u00e3o 6, pois \u00e9 o comportamento padr\u00e3o. Al\u00e9m disso, o componente <code>&lt;Route&gt;<\/code> n\u00e3o usa mais <code>component={Home}<\/code> para atribuir o componente, mas agora usa <code>element={&lt;Contact\/&gt;}<\/code>.<\/p>\n<\/aside>\n\n<h4>Vantagens das rotas em rela\u00e7\u00e3o ao switch no React Router v6<\/h4>\n<p>Com o lan\u00e7amento do React Router v6, a introdu\u00e7\u00e3o do componente <code>&lt;Routes&gt;<\/code> trouxe v\u00e1rias vantagens em rela\u00e7\u00e3o ao componente <code>&lt;Switch&gt;<\/code> obsoleto nas vers\u00f5es anteriores.<\/p>\n<p>Vejamos algumas vantagens de usar <code>&lt;Routes&gt;<\/code> para lidar com a l\u00f3gica de roteamento em seus aplicativos React.<\/p>\n<h5>1. Roteamento aninhado aprimorado<\/h5>\n<p>O elemento <code>&lt;Routes&gt;<\/code> permite configura\u00e7\u00f5es de roteamento aninhado melhoradas em compara\u00e7\u00e3o com <code>&lt;Switch&gt;<\/code>. Com <code>&lt;Routes&gt;<\/code>, voc\u00ea pode definir rotas aninhadas facilmente, aninhando componentes <code>&lt;Route&gt;<\/code> dentro de outros componentes <code>&lt;Routes&gt;<\/code>, tornando mais intuitivo e organizado o manejo de estruturas de roteamento complexas.<\/p>\n<p>Isso pode ajudar a simplificar o gerenciamento da l\u00f3gica de roteamento em aplicativos maiores com v\u00e1rios n\u00edveis de rotas aninhadas.<\/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. Correspond\u00eancia din\u00e2mica de rotas<\/h5>\n<p><code>&lt;Routes&gt;<\/code> oferece mais flexibilidade na correspond\u00eancia e na renderiza\u00e7\u00e3o de rotas de forma din\u00e2mica com base nos par\u00e2metros de rota. Isso permite um roteamento mais din\u00e2mico e orientado por dados em seu aplicativo.<\/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. Tratamento de erros aprimorado<\/h5>\n<p><code>&lt;Routes&gt;<\/code> oferece um tratamento de erros aprimorado para rotas n\u00e3o correspondentes. Se uma rota n\u00e3o for encontrada, o <code>&lt;Routes&gt;<\/code> renderiza automaticamente um componente &#8220;Not Found&#8221; ou um componente de erro personalizado que voc\u00ea pode definir.<\/p>\n<p>Isso pode ajudar a aprimorar a experi\u00eancia do usu\u00e1rio, tratando com eleg\u00e2ncia URLs inv\u00e1lidos ou rotas que n\u00e3o existem no seu aplicativo.<\/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. Fa\u00e7a o downgrade da vers\u00e3o do react-router-dom para 5 ou inferior<\/h3>\n<p>Se preferir continuar usando <code>&lt;Switch&gt;<\/code> em seu projeto, voc\u00ea pode corrigir o erro fazendo o downgrade da vers\u00e3o do <strong>react-router-dom<\/strong> para a 5 ou inferior.<\/p>\n<p>Essa pode ser uma solu\u00e7\u00e3o vi\u00e1vel se voc\u00ea tiver um projeto existente que foi criado usando uma vers\u00e3o mais antiga do React Router. Voc\u00ea pode fazer isso desinstalando primeiro a vers\u00e3o mais recente do React Router que voc\u00ea instalou usando o comando abaixo:<\/p>\n<pre><code class=\"language-bash\">npm uninstall react-router-dom<\/code><\/pre>\n<p>Agora voc\u00ea pode usar esse comando para instalar a \u00faltima vers\u00e3o principal que incluiu o componente <code>&lt;Switch&gt;<\/code>, que \u00e9 a vers\u00e3o 5.2.0:<\/p>\n<pre><code class=\"language-bash\">npm install react-router-dom@5.2.0<\/code><\/pre>\n\n<h2>Resumo<\/h2>\n<p>Neste artigo, voc\u00ea aprendeu sobre o erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d e explorou algumas maneiras de corrigi-lo. Voc\u00ea tamb\u00e9m aprendeu as vantagens de usar o mais novo componente <code>&lt;Routes&gt;<\/code> em vez do obsoleto componente <code>&lt;Switch&gt;<\/code>.<\/p>\n<p>Ao iniciar um novo projeto, \u00e9 recomend\u00e1vel que voc\u00ea sempre use a vers\u00e3o mais recente do React Router, pois ela oferece melhorias significativas e atualiza\u00e7\u00f5es cont\u00ednuas.<\/p>\n<p>No entanto, suponha que voc\u00ea esteja trabalhando em um projeto existente e n\u00e3o tenha tempo para atualizar seu c\u00f3digo extensivamente para usar a nova sintaxe e os componentes v6 do React Router. Nesse caso, voc\u00ea deve continuar usando a vers\u00e3o mais antiga do React Router que funciona com seu c\u00f3digo.<\/p>\n<p><em>Agora \u00e9 a sua vez: Voc\u00ea j\u00e1 se deparou com esse problema? Como resolveu? Existem outras abordagens que voc\u00ea utilizou e que n\u00e3o foram mencionadas neste artigo?Compartilhe sua experi\u00eancia na se\u00e7\u00e3o de coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O React Router \u00e9 uma biblioteca de roteamento popular usada em aplicativos React para gerenciar a navega\u00e7\u00e3o e fornecer funcionalidade de roteamento cont\u00ednua. No entanto, como &#8230;<\/p>\n","protected":false},"author":287,"featured_media":59590,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1003,1002],"class_list":["post-59589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erros-do-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>Como Corrigir o Erro \u201cSwitch is not exported from &#039;react-router-dom&#039; in React\u201d - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: &#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\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Corrigir o Erro \u201cSwitch is not exported from &#039;react-router-dom&#039; in React\u201d\" \/>\n<meta property=\"og:description\" content=\"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: &#039;switch&#039; is not exported from &#039;react-router-dom&#039;.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/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\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-03T10:47:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:00:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: &#039;switch&#039; is not exported from &#039;react-router-dom&#039;.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Corrigir o Erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d\",\"datePublished\":\"2023-11-03T10:47:24+00:00\",\"dateModified\":\"2025-10-01T20:00:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\"},\"wordCount\":1048,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\",\"name\":\"Como Corrigir o Erro \u201cSwitch is not exported from 'react-router-dom' in React\u201d - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg\",\"datePublished\":\"2023-11-03T10:47:24+00:00\",\"dateModified\":\"2025-10-01T20:00:48+00:00\",\"description\":\"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: 'switch' is not exported from 'react-router-dom'.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erros do React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/erros-do-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Corrigir o Erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Corrigir o Erro \u201cSwitch is not exported from 'react-router-dom' in React\u201d - Kinsta\u00ae","description":"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: '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\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Corrigir o Erro \u201cSwitch is not exported from 'react-router-dom' in React\u201d","og_description":"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: 'switch' is not exported from 'react-router-dom'.","og_url":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-11-03T10:47:24+00:00","article_modified_time":"2025-10-01T20:00:48+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: 'switch' is not exported from 'react-router-dom'.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Corrigir o Erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d","datePublished":"2023-11-03T10:47:24+00:00","dateModified":"2025-10-01T20:00:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/"},"wordCount":1048,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","url":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/","name":"Como Corrigir o Erro \u201cSwitch is not exported from 'react-router-dom' in React\u201d - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg","datePublished":"2023-11-03T10:47:24+00:00","dateModified":"2025-10-01T20:00:48+00:00","description":"Este guia f\u00e1cil de seguir mostra duas maneiras de corrigir o erro: 'switch' is not exported from 'react-router-dom'.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/attempted-import-error-featured.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/attempted-import-error-switch-is-not-exported-from-react-router-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Erros do React","item":"https:\/\/kinsta.com\/pt\/topicos\/erros-do-react\/"},{"@type":"ListItem","position":3,"name":"Como Corrigir o Erro \u201cSwitch is not exported from &#8216;react-router-dom&#8217; in React\u201d"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=59589"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59589\/revisions"}],"predecessor-version":[{"id":64601,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59589\/revisions\/64601"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59589\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/59590"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=59589"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=59589"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=59589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}