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

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

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

In questo articolo vediamo le cause di questo errore e come risolverlo, così potete assicurarvi un routing e una navigazione fluidi nelle vostre 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, il componente <Switch> si usava per avvolgere tutti i percorsi nella vostra 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 offre un approccio più dichiarativo e flessibile al routing rispetto al componente <Switch>, ormai deprecato.

Quindi, se avete effettuato di recente l’aggiornamento a React Router v6 (o a una versione più recente) e state ancora cercando di usare il componente deprecato <Switch>, incontrerete 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
Messaggio di errore Switch is not exported from ‘react-router-dom
Hai aggiornato di recente il tuo router React? Fai attenzione a questo errore che potrebbe presentarsi inaspettatamente. Scopri qui le cause e le soluzioni 💪 Clicca per twittare

2 modi 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 vostro progetto. I due modi sono i seguenti:

  • Usare <Routes> invece di <Switch>
  • Aggiornare la versione di react-router-dom alla 5 o inferiore

1. Usare <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 un esempio di come aggiornare il vostro codice di routing passando dall’utilizzo del componente <Switch> deprecato nella versione 5 di React Router al nuovo componente <Routes> nella 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 sopra riportato, stiamo usando il componente <Switch> per avvolgere le nostre route. Tuttavia, nella versione 6 di React Router, dobbiamo aggiornare il nostro codice di routing per usare il componente <Routes> e seguire 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;

Come potete vedere, abbiamo sostituito il componente <Switch> con il componente <Routes> e ogni <Route> è ora definita utilizzando il prop element invece del prop component.

Vantaggi delle Route rispetto agli Switch in React Router v6

Con il rilascio di React Router v6, l’introduzione del componente <Routes> ha portato diversi vantaggi rispetto al componente <Switch> deprecato nelle versioni precedenti.

Vediamo alcuni vantaggi dell’uso di <Routes> per gestire la logica di routing nelle vostre applicazioni React.

1. Miglioramento del routing annidato

<Routes> permette di migliorare le configurazioni di routing annidato rispetto a <Switch>. Con <Routes>, potete 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 semplificare la gestione della logica di routing in applicazioni di grandi dimensioni con più livelli di percorsi 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 dei percorsi in base ai parametri del percorso. Questo permette di creare percorsi più dinamici e basati sui dati nella vostra applicazione.

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

<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 che potrete definire voi.

Questo può aiutare a migliorare l’esperienza utente gestendo con grazia gli URL non validi o le route che non esistono nella vostra 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 preferite continuare a usare <Switch> nel vostro progetto, potete risolvere l’errore aggiornando la versione di react-router-dom alla 5 o inferiore.

Questa può essere una soluzione valida se avete un progetto esistente realizzato con una versione precedente di React Router. Potete farlo disinstallando prima l’ultima versione di React Router installata. Usate il comando seguente:

npm uninstall react-router-dom

Ora potete usare questo comando per installare l’ultima versione principale che include il componente <Switch>, ovvero la versione 5.2.0:

npm install [email protected]
Quante giornate perfette sono state rovinate da questo fastidioso errore? Risolvilo velocemente con questa guida e vai avanti con la tua giornata. 🏃‍♂️💨 Clicca per twittare

Riepilogo

In questo articolo avete imparato a conoscere l’errore “Switch Is Not Exported from ‘react-router-dom’” in React e avete esplorato alcuni modi per risolverlo. Avete anche appreso i vantaggi dell’utilizzo del nuovo componente <Routes> rispetto al deprecato componente <Switch>.

Quando si avvia un nuovo progetto, si consiglia di usare sempre l’ultima versione di React Router, perché offre miglioramenti significativi e aggiornamenti continui.

Tuttavia, supponiamo che stiate lavorando a un progetto esistente e che non abbiate il tempo di aggiornare il vostro codice in modo estensivo per usare la nuova sintassi e i componenti di React Router v6. In questo caso, continuate a usare la versione precedente di React Router che funziona con il vostro codice.

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