React Router è una popolare libreria di routing utilizzata nelle applicazioni React per gestire la navigazione e fornire funzionalità di routing. Tuttavia, come per tutte le librerie, nel corso del tempo si verificano aggiornamenti e modifiche che possono generare errori perché alcune funzionalità diventano obsolete.

Un errore che si può riscontrare quando si implementa il routing nelle applicazioni React è l’errore “‘Switch is not exported from ‘react-router-dom'”.

Questo si verifica quando si effettua l’aggiornamento da una versione precedente di React Router a una più recente (attualmente la v6) senza tener conto di alcuni componenti deprecati come <Switch>.

In questo articolo analizzeremo le cause di questo errore e vedremo come risolverlo, per garantire un routing e una navigazione fluidi nelle applicazioni React.

Quali sono le cause dell’errore “Switch is not exported from ‘react-router-dom’” in React?

In React Router versione 5 e precedenti, si utilizzava il componente <Switch> per racchiudere tutte le route di un’applicazione React. Nella versione 6 di React Router, il componente <Switch> è stato deprecato e sostituito dal componente <Routes>.

Il componente <Routes> in React Router v6 ha un approccio più dichiarativo e flessibile al routing rispetto al componente <Switch>, ormai deprecato.

Quindi, se è stato effettuato di recente l’aggiornamento a React Router v6 (o a una versione più recente) e si sta ancora cercando di utilizzare il componente deprecato <Switch>, si riscontrerà l’errore “‘Switch is not exported from ‘react-router-dom'”.

Schermata di un editor React con il messaggio di errore Switch is not exported from 'react-router-dom
Il messaggio di errore Switch is not exported from ‘react-router-dom

2 metodi per risolvere l’errore “Switch is not exported from ‘react-router-dom’” in React

Questo errore può essere risolto in due modi, a seconda dell’approccio desiderato e dei requisiti del progetto:

  • Utilizzare <Routes> invece di <Switch>
  • Eseguire il downgrade della versione di react-router-dom alla 5 o inferiore

1. Utilizzare <Routes> invece di <Switch>

Un modo per risolvere l’errore “Switch Is Not Exported from ‘react-router-dom’” in React è quello di sostituire <Switch> con <Routes>.

Vediamo come aggiornare il codice di routing passando dal componente <Switch>, deprecato dalla versione 5 di React Router, al nuovo componente <Routes> introdotto dalla versione 6 di React Router.

In React Router versione 5 abbiamo:

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;

Nel codice qui sopra, abbiamo utilizzato il componente <Switch> per racchiudere le nostre route. Tuttavia, nella versione 6 di React Router, dobbiamo modificare il nostro codice di routing utilizzando il componente <Routes> e le API aggiornate.

Ecco come si presenterebbe lo stesso esempio in React Router versione 6 e successive:

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;

Qui abbiamo sostituito il componente <Switch> con il componente <Routes> e ogni <Route> è ora definita utilizzando la proprietà element invece della proprietà component.

Vantaggi delle Route rispetto agli Switch in React Router v6

L’introduzione del componente <Routes> con React Router v6 ha portato diversi vantaggi rispetto al componente <Switch>, ormai deprecato.

Vediamo alcuni dei vantaggi di <Routes> nella gestione della logica di routing nelle applicazioni React.

1. Miglioramento del routing annidato

<Routes> permette di migliorare le configurazioni di routing annidato rispetto a <Switch>. Con <Routes>, è possibile definire facilmente percorsi annidati, annidando i componenti <Route> all’interno di altri componenti <Route>.

Questo rende più intuitiva e organizzata la gestione di strutture di routing complesse e può aiutare a rendere più semplice la gestione della logica di routing in applicazioni di grandi dimensioni con più livelli di route annidati.

<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. Corrispondenza dinamica delle route

<Routes> offre una maggiore flessibilità nell’abbinamento e nel rendering dinamico delle route in base ai parametri della route. Questo permette di creare route più dinamiche e basate sui dati.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:userId" element={<UserProfile />} />
  <Route path="/products/:productId" element={<ProductDetail />} />
</Routes>
3. Migliore gestione degli errori

<Routes> offre una migliore gestione degli errori per i percorsi non trovati. Se un percorso non viene trovato, <Routes> visualizza automaticamente un componente “Not Found” o un componente di errore personalizzato.

Questo può permettere di migliorare l’esperienza utente gestendo in modo elegante gli URL non validi o le route che non esistono nell’applicazione.

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

2. Aggiornare la versione di react-router-dom alla versione 5 o inferiore

Se si dovesse preferire continuare a utilizzare <Switch>, è possibile risolvere l’errore eseguendo il downgrade della versione di react-router-dom alla 5 o inferiore.

Questa può essere una soluzione valida per un progetto realizzato con una versione precedente di React Router. Bisognerà prima disinstallare l’ultima versione installata di React Router con il comando seguente:

npm uninstall react-router-dom

Ora si potrà utilizzare questo comando per installare l’ultima major version che include il componente <Switch>, ovvero la versione 5.2.0:

npm install [email protected]

Riepilogo

In questo articolo abbiamo analizzato l’errore “Switch Is Not Exported from ‘react-router-dom’” in React e abbiamo descritto alcuni metodi per risolverlo. Abbiamo anche analizzato i vantaggi del nuovo componente <Routes> rispetto al deprecato <Switch>.

Quando si avvia un nuovo progetto, è sempre consigliabile utilizzare l’ultima versione di React Router, perché porta miglioramenti significativi.

Tuttavia, se state lavorando a un progetto già esistente e non avete il tempo di aggiornare il vostro codice in modo da utilizzare la nuova sintassi e i nuovi componenti di React Router v6, potete continuare a usare la versione precedente di React Router.

Ora tocca a voi: avete mai riscontrato questo problema? Come l’avete risolto? Avete seguito altri approcci che non abbiamo trattato in questo articolo? Fatecelo sapere nei commenti!