Resolver el error React «‘Switch’ no se exporta de ‘react-router-dom'»

React Router es una piedra angular para los desarrolladores que trabajan con aplicaciones React, ya que proporciona las herramientas necesarias para una navegación y enrutamiento fluidos.
Sin embargo, navegar a través de las actualizaciones de la biblioteca a veces puede parecer que estás tratando de encontrar el camino a través de un laberinto.
Un buen ejemplo de este reto es la transición de la versión 5 a la versión 6 de React Router.
La versión más reciente nos lleva a un obstáculo común al que se enfrentan muchos desarrolladores: el infame error «‘Switch’ no se exporta desde ‘react-router-dom'».

¿Cuál es la causa del error React «‘Switch’ no se encontró en ‘react-router-dom'»?

El error «‘Switch’ no se encontró en ‘react-router-dom'» de React es un resultado directo de la evolución dentro de la biblioteca React Router.

Hasta la versión 5, el componente <Switch> era un para agrupar rutas, garantizando que sólo se renderizara la primera ruta coincidente.
Cuando llega la versión 6, el panorama cambia: <Switch> está fuera y <Routes> está dentro.

¿Por qué este cambio?

Adecuación de rutas simplificada: El cambio a <Routes> elimina la necesidad de la proposición `exact`, ya que ahora la concordancia es exacta por defecto.
Esto reduce la complejidad y la posibilidad de errores.

Enrutamiento anidado mejorado: El enrutamiento anidado es más lógico y fácil de gestionar, lo que agiliza el desarrollo de aplicaciones con necesidades de enrutamiento complejas.Capacidades de enrutamiento dinámico: <Routes> admite parámetros de ruta dinámicos con más elegancia, lo que permite una experiencia de usuario más dinámica e interactiva.Este cambio pretende agilizar la gestión de las rutas, pero significa que hay que hacer un poco de tarea para que tu aplicación funcione sin problemas.

Si has actualizado recientemente a React Router v6 sin actualizar tu código para que coincida, es probable que te encuentres de frente con este error.
Es como intentar encajar una clavija cuadrada en un agujero redondo; el componente <Switch> simplemente no existe en la caja de herramientas de React Router v6.

2 métodos para solucionar el error de React «‘Switch’ no se exporta desde ‘react-router-dom'»

Para navegar por el cambio que produce el error React «‘Switch’ no se exporta desde ‘react-router-dom'» hay dos caminos principales que puedes tomar.

La primera, y posiblemente la que mejor se ajusta al avance, es adoptar el nuevo componente <Routes>.
Esto implica actualizar tu configuración de enrutamiento para sustituir <Switch> por <Routes>, un cambio que no sólo resuelve el error, sino que también desbloquea las ventajas del enfoque de enrutamiento más flexible de la última versión.
Por ejemplo, donde antes usabas <Switch>, ahora usarás <Routes>, ajustando cómo defines las rutas dentro de tu aplicación para que coincidan con la nueva sintaxis.

He aquí un ejemplo rápido para ilustrar la transición:React Router v5 (Utilizando <Switch>):Enrutador React v6 (Usando <Routes>):

El segundo camino tiene más que ver con la conservación que con la progresión.
Si tu proyecto está profundamente entrelazado con el componente <Switch> y no está prevista una actualización completa, retroceder a la versión 5 de React Router es una solución.
Este enfoque mantiene <Switch>, pero a costa de perderse las mejoras que aporta la versión 6.

En última instancia, la elección entre actualizar para utilizar <Routes> o volver a una versión anterior de React Router depende de las necesidades específicas de tu proyecto y de tu voluntad de adaptarte a los estándares del nuevo framework.

Instrucciones paso a paso para solucionar el error de cambio de React

Profundicemos en cada método, para que puedas elegir el que mejor se adapte a tu proyecto y volver a codificar sin perder el ritmo.

1. Utiliza <Routes> en lugar de <Switch>

Con la evolución de React Router a la versión 6, <Switch> dijo adiós, dejando espacio para que <Routes> ocupe el centro de atención.
Este cambio tiene como objetivo mejorar la experiencia de enrutamiento ofreciendo una correspondencia de rutas más intuitiva y flexible, entre otras ventajas.
Aquí tienes un desglose de cómo pasar de <Switch> a <Routes> en tu proyecto.

Ejemplo de transición de la versión 5 a la versión 6

En Enrutador React v5el enrutamiento podría tener este aspecto

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 = () => (

 <Router>

 <Switch>

 <Route exact path="/" component={Home} />

 <Route path="/about" component={About} />

 <Route path="/contact" component={Contact} />

 </Switch>

 </Router>

);

Para adaptarnos a la versión 6 de React Routerrevisamos la estructura de la siguiente manera:

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 = () => (

 <Router>

 <Routes>

 <Route path="/" element={<Home />} />

 <Route path="/about" element={<About />} />

 <Route path="/contact" element={<Contact />} />

 </Routes>

 </Router>

);

Guía de transición paso a paso

1. Actualiza tus importaciones: Sustituye Switch por Routes en tu declaración de importación de react-router-dom.
2. Refactoriza tus definiciones de rutas: Utiliza la prop element en lugar de component, pasando el componente como JSX (por ejemplo, element={<Home />}).
3. Revisar rutas anidadas: Si tu aplicación utiliza rutas anidadas, aprovecha esta oportunidad para refactorizar esas rutas utilizando los elementos anidados de <Route> dentro de <Routes> para conseguir una estructura más intuitiva.

2. Baja la versión de react-router-dom a 5 o inferior.

Si tu proyecto depende en gran medida de la estructura proporcionada por React Router v5, o si estás trabajando con limitaciones que hacen que la actualización a v6 sea menos factible, degradar a la versión 5 o inferior es un enfoque válido.

Cómo bajar de categoría

1. Ejecuta npm uninstall react-router-dom para eliminar la versión existente de tu proyecto.
2. Ejecuta npm install [email protected] para instalar la última versión compatible con <Switch>.
   Esta versión reintroducirá <Switch> en tu proyecto, permitiéndote continuar el desarrollo sin reestructurar tu lógica de enrutamiento.

Consideraciones al bajar de categoría

Limitaciones de funciones: Ten en cuenta que si te quedas con una versión anterior, puedes perderte mejoras y nuevas funciones introducidas en versiones posteriores.

Ayuda a largo plazo: Considera las implicaciones a largo plazo, ya que utilizar versiones obsoletas puede provocar problemas de compatibilidad o falta de asistencia en el futuro.

Conclusión

El cambio de <Switch> a <Routes> en React Router v6 es un vívido recordatorio de la naturaleza en constante evolución del desarrollo web.
Nos anima a mantenernos adaptables, actualizar continuamente nuestra base de conocimientos y aceptar cambios que, aunque a veces supongan un reto, están diseñados para perfeccionar y mejorar nuestras prácticas de desarrollo.

Cuando te encuentres con el error «‘Switch’ is not exported from ‘react-router-dom'», tienes dos caminos claros para resolverlo: actualizar tu código para utilizar <Routes> con React Router v6 o degradar a la versión 5 para mantener el uso de <Switch>.
Cada método tiene sus ventajas, y puesto que el objetivo final es que tu aplicación funcione sin problemas, tómate un momento para sopesar tus opciones, considerar el impacto en tu proyecto y elegir el camino que mejor se adapte a tus necesidades.
¡Feliz codificación!