O React Router é uma biblioteca de roteamento popular usada em aplicativos React para gerenciar a navegação e fornecer funcionalidade de roteamento contínua. No entanto, como acontece com qualquer biblioteca, atualizações e alterações podem ocorrer ao longo do tempo, o que pode levar a erros porque alguns recursos se tornam obsoletos.
Um erro comum que você pode encontrar ao implementar o roteamento em aplicativos React é o erro “‘Switch’ is not exported from ‘react-router-dom'”.
Este erro ocorre quando você atualiza de uma versão antiga do React Router para uma versão mais recente (atualmente v6) sem levar em conta alguns componentes obsoletos, como o <Switch>.
Neste artigo, você aprenderá as causas desse erro e como corrigi-lo, garantindo o roteamento e a navegação suave em seu aplicativo React.
O que causa o erro “Switch is not exported from ‘react-router-dom’ in React”?
No React Router versão 5 e anteriores, o componente <Switch> foi usado para envolver todas as rotas em seu aplicativo React. Na versão 6 do React Router, o componente <Switch> foi descontinuado e substituído pelo componente <Routes>.
O componente <Routes> no React Router v6 oferece uma abordagem mais declarativa e flexível para o roteamento em comparação com o componente <Switch>, que foi descontinuado.
Portanto, se você tiver atualizado recentemente para o React Router v6 (ou uma versão mais recente) e ainda estiver tentando usar o componente <Switch> obsoleto, encontrará o erro “‘Switch’ is not exported from ‘react-router-dom'”.
2 maneiras de corrigir o erro “Switch is not exported from ‘react-router-dom’ in React”
Esse erro pode ser corrigido de duas maneiras, dependendo da abordagem desejada e dos requisitos do seu projeto. As duas maneiras são as seguintes:
- Usar <Routes> em vez de <Switch>
- Fazer downgrade da versão do react-router-dom para 5 ou inferior
1. Use <Routes> em vez de <Switch>
Uma maneira de corrigir o erro “‘Switch’ is not exported from ‘react-router-dom'” é substituir <Switch> por <Routes>.
Vamos dar uma olhada em um exemplo de como atualizar seu código de roteamento usando o componente obsoleto <Switch> na versão 5 do React Router para o novo componente <Routes> na versão 6 do React Router.
No React Router versão 5:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
};
export default App;No código acima, estamos usando o componente <Switch> para envolver nossas rotas. No entanto, na versão 6 do React Router, precisamos atualizar nosso código de roteamento para usar o componente <Routes> e seguir a API atualizada.
Veja como o mesmo exemplo ficaria no React Router versão 6 e posteriores:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
};
export default App;Como você pode ver, substituímos o componente <Switch> pelo componente <Routes>, e cada <Route> agora é definido usando a propriedade element em vez da propriedade component.
Vantagens das rotas em relação ao switch no React Router v6
Com o lançamento do React Router v6, a introdução do componente <Routes> trouxe várias vantagens em relação ao componente <Switch> obsoleto nas versões anteriores.
Vejamos algumas vantagens de usar <Routes> para lidar com a lógica de roteamento em seus aplicativos React.
1. Roteamento aninhado aprimorado
O elemento <Routes> permite configurações de roteamento aninhado melhoradas em comparação com <Switch>. Com <Routes>, você pode definir rotas aninhadas facilmente, aninhando componentes <Route> dentro de outros componentes <Routes>, tornando mais intuitivo e organizado o manejo de estruturas de roteamento complexas.
Isso pode ajudar a simplificar o gerenciamento da lógica de roteamento em aplicativos maiores com vários níveis de rotas aninhadas.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />}>
<Route path="/team" element={<Team />} />
<Route path="/history" element={<History />} />
</Route>
<Route path="/contact" element={<Contact />} />
</Routes>2. Correspondência dinâmica de rotas
<Routes> oferece mais flexibilidade na correspondência e na renderização de rotas de forma dinâmica com base nos parâmetros de rota. Isso permite um roteamento mais dinâmico e orientado por dados em seu aplicativo.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users/:userId" element={<UserProfile />} />
<Route path="/products/:productId" element={<ProductDetail />} />
</Routes>3. Tratamento de erros aprimorado
<Routes> oferece um tratamento de erros aprimorado para rotas não correspondentes. Se uma rota não for encontrada, o <Routes> renderiza automaticamente um componente “Not Found” ou um componente de erro personalizado que você pode definir.
Isso pode ajudar a aprimorar a experiência do usuário, tratando com elegância URLs inválidos ou rotas que não existem no seu aplicativo.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
{/* Error route */}
<Route path="*" element={<NotFound />} />
</Routes>2. Faça o downgrade da versão do react-router-dom para 5 ou inferior
Se preferir continuar usando <Switch> em seu projeto, você pode corrigir o erro fazendo o downgrade da versão do react-router-dom para a 5 ou inferior.
Essa pode ser uma solução viável se você tiver um projeto existente que foi criado usando uma versão mais antiga do React Router. Você pode fazer isso desinstalando primeiro a versão mais recente do React Router que você instalou usando o comando abaixo:
npm uninstall react-router-domAgora você pode usar esse comando para instalar a última versão principal que incluiu o componente <Switch>, que é a versão 5.2.0:
npm install [email protected]Resumo
Neste artigo, você aprendeu sobre o erro “Switch is not exported from ‘react-router-dom’ in React” e explorou algumas maneiras de corrigi-lo. Você também aprendeu as vantagens de usar o mais novo componente <Routes> em vez do obsoleto componente <Switch>.
Ao iniciar um novo projeto, é recomendável que você sempre use a versão mais recente do React Router, pois ela oferece melhorias significativas e atualizações contínuas.
No entanto, suponha que você esteja trabalhando em um projeto existente e não tenha tempo para atualizar seu código extensivamente para usar a nova sintaxe e os componentes v6 do React Router. Nesse caso, você deve continuar usando a versão mais antiga do React Router que funciona com seu código.
Agora é a sua vez: Você já se deparou com esse problema? Como resolveu? Existem outras abordagens que você utilizou e que não foram mencionadas neste artigo?Compartilhe sua experiência na seção de comentários!
