React Router es una popular biblioteca de enrutamiento utilizada en aplicaciones React para gestionar la navegación y proporcionar una funcionalidad de enrutamiento sin problemas. Sin embargo, como ocurre con cualquier biblioteca, con el tiempo pueden producirse actualizaciones y cambios, lo que puede dar lugar a errores, ya que algunas funciones quedan obsoletas.

Un error común que puedes encontrar al implementar el enrutamiento en aplicaciones React es el error «‘Switch’ is not exported from ‘react-router-dom'».

Este error se produce cuando actualizas de una versión antigua de React Router a una versión más reciente (actualmente la v6) sin tener en cuenta algunos componentes obsoletos como <Switch>.

En este artículo, aprenderás las causas de este error y cómo solucionarlo, asegurando un enrutamiento y navegación fluidos en tus aplicaciones React.

¿Qué Causa el Error «‘Switch’ is not exported from ‘react-router-dom'»?

En React Router versión 5 y anteriores, el componente <Switch> se utilizaba para envolver todas las rutas de tu aplicación React. En la versión 6 de React Router, el componente <Switch> ha quedado obsoleto y se ha sustituido por el componente <Routes>.

El componente <Routes> de React Router v6 proporciona un enfoque más declarativo y flexible del enrutamiento en comparación con el componente obsoleto <Switch>.

Por tanto, si has actualizado recientemente a React Router v6 (o a una versión más reciente) y sigues intentando utilizar el componente obsoleto <Switch>, te encontrarás con el error «‘Switch’ is not exported from ‘react-router-dom'».

Mensaje de error Switch 'is not exported from 'react-router-dom
Switch ‘is not exported from ‘react-router-dom’

2 Formas de Solucionar el Error «‘Switch’ is not exported from ‘react-router-dom’

Este error puede solucionarse de dos formas, dependiendo del enfoque deseado y de los requisitos de tu proyecto. Las dos formas son las siguientes:

  • Utiliza <Routes> en lugar de <Switch>.
  • Baja la versión de react-router-dom a 5 o inferior

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

Una forma de solucionar el error «‘Switch’ is not exported from ‘react-router-dom'» es sustituir <Switch> por <Routes>.

Veamos un ejemplo de cómo actualizar tu código de enrutamiento pasando de utilizar el componente obsoleto <Switch> de la versión 5 de React Router al nuevo componente <Routes> de la versión 6 de React Router.

En la versión 5 de React Router:

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;

En el código anterior, estamos utilizando el componente <Switch> para envolver nuestras rutas. Sin embargo, en la versión 6 de React Router, tenemos que actualizar nuestro código de rutas para utilizar el componente <Routes> y seguir la API actualizada.

Así es como se vería el mismo ejemplo en React Router versión 6 y 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 puedes ver, hemos sustituido el componente <Switch> por el componente <Routes>, y cada <Route> se define ahora utilizando la prop element en lugar de la prop component.

Ventajas de Routes sobre Switch en React Router v6

Con el lanzamiento de React Router v6, la introducción del componente <Routes> ha aportado varias ventajas sobre el componente <Switch>, obsoleto en versiones anteriores.

Veamos algunas ventajas de utilizar <Routes> para manejar la lógica de enrutamiento en tus aplicaciones React.

1. Enrutamiento Anidado Mejorado

<Routes> permite configuraciones de enrutamiento anidado mejoradas en comparación con <Switch>. Con <Routes>, puedes definir rutas anidadas fácilmente anidando componentes <Route> dentro de otros componentes <Route>, lo que hace más intuitivo y organizado el manejo de estructuras de enrutamiento complejas.

Esto puede ayudar a simplificar la gestión de la lógica de enrutamiento en aplicaciones más grandes con múltiples niveles de rutas anidadas.

<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. Correspondencia Dinámica de Rutas

<Routes> proporciona más flexibilidad a la hora de emparejar y renderizar rutas dinámicamente en función de los parámetros de la ruta. Esto permite un enrutamiento más dinámico y basado en datos en tu aplicación.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:userId" element={<UserProfile />} />
  <Route path="/products/:productId" element={<ProductDetail />} />
</Routes>
3. Gestión de Errores Mejorada

<Routes> proporciona una gestión de errores mejorada para las rutas no encontradas. Si no se encuentra una ruta, <Routes> muestra automáticamente un componente «Not Found» o un componente de error personalizado que puedes definir.

Esto puede ayudar a mejorar la experiencia del usuario gestionando con elegancia las URL no válidas o las rutas que no existen en tu aplicación.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  {/* Error route */}
  <Route path="*" element={<NotFound />} />
</Routes>

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

Si prefieres seguir utilizando <Switch> en tu proyecto, puedes solucionar el error bajando la versión de react-router-dom a 5 o inferior.

Esta puede ser una solución viable si tienes un proyecto existente que se construyó utilizando una versión anterior de React Router. Puedes hacer esto desinstalando primero la última versión de React router que instalaste usando el siguiente comando:

npm uninstall react-router-dom

Ahora puedes utilizar este comando para instalar la última versión principal que incluía el componente <Switch>, o sea la versión 5.2.0:

npm install [email protected]

Resumen

En este artículo, has aprendido sobre el error “‘Switch’ is not exported from ‘react-router-dom’” en React y has explorado algunas formas de solucionarlo. También has aprendido las ventajas de utilizar el nuevo componente <Routes> frente al componente obsoleto <Switch>.

Al iniciar un nuevo proyecto, se recomienda utilizar siempre la última versión de React Router, ya que ofrece mejoras significativas y actualizaciones continuas.

Sin embargo, supongamos que estás trabajando en un proyecto existente, y no tienes tiempo de actualizar ampliamente tu código para utilizar la nueva sintaxis y componentes v6 de React Router. En ese caso, sigue utilizando la versión anterior de React Router que funcione con tu código.

Ahora te toca a ti: ¿Te has encontrado alguna vez con este problema? ¿Cómo lo resolviste? ¿Hay algún otro método que hayas utilizado y que no se haya tratado en este artículo? ¡Háznoslo saber en los comentarios!