React Router est une bibliothèque de routage populaire utilisée dans les applications React pour gérer la navigation et fournir des fonctionnalités de routage transparentes. Cependant, comme pour toute bibliothèque, des mises à jour et des changements peuvent survenir au fil du temps, ce qui peut entraîner des erreurs car certaines fonctionnalités deviennent dépréciées.

Une erreur courante que vous pouvez rencontrer lors de la mise en œuvre du routage dans les applications React est l’erreur « ‘Switch’ is not exported from ‘react-router-dom ».

Cette erreur se produit lorsque vous passez d’une ancienne version de React Router à une version plus récente (actuellement v6) sans tenir compte de certains composants dépréciés comme <Switch>.

Dans cet article, vous apprendrez les causes de cette erreur et comment la corriger, afin de garantir un routage et une navigation fluides dans vos applications React.

Quelles sont les causes de l’erreur « Switch is not exported from ‘react-router-dom’ » ?

Dans React Router version 5 et précédentes, le composant <Switch> était utilisé pour envelopper toutes les routes dans votre application React. Dans la version 6 de React Router, le composant <Switch> a été supprimé et remplacé par le composant <Routes>.

Le composant <Routes> de React Router v6 offre une approche plus déclarative et plus flexible du routage que le composant <Switch>, qui est obsolète.

Par conséquent, si vous avez récemment mis à jour vers React Router v6 (ou une version plus récente) et que vous essayez toujours d’utiliser le composant obsolète <Switch>, vous rencontrerez l’erreur « Switch is not exported from ‘react-router-dom’ ».

Message d'erreur Switch' is not exported from 'react-router-dom
Message d’erreur Switch’ is not exported from ‘react-router-dom

2 façons de corriger l’erreur « Switch is not exported from ‘react-router-dom’ in React »

Cette erreur peut être corrigée de deux manières, en fonction de l’approche souhaitée et des exigences de votre projet. Les deux méthodes sont les suivantes :

  • Utilisez <Routes> au lieu de <Switch>.
  • Rétrogradez la version de react-router-dom à 5 ou moins

1. Utilisez <Routes> au lieu de <Switch>.

Une façon de corriger l’erreur « « Switch’ is not exported from ‘react-router-dom’ » est de remplacer <Switch> par <Routes>.

Voyons un exemple de mise à jour de votre code de routage, en passant du composant <Switch>, obsolète dans React Router version 5, au nouveau composant <Routes> dans React Router version 6.

Dans React Router version 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;

Dans le code ci-dessus, nous utilisons le composant <Switch> pour envelopper nos routes. Cependant, dans React Router version 6, nous devons mettre à jour notre code de routage pour utiliser le composant <Routes> et suivre l’API mise à jour.

Voici à quoi ressemblerait le même exemple dans React Router version 6 et suivantes :

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;

Comme vous pouvez le voir, nous avons remplacé le composant <Switch> par le composant <Routes>, et chaque <Route> est désormais défini à l’aide de la propriété element au lieu de la propriété component.

Avantages de Routes par rapport à Switch dans React Router v6

Avec la sortie de React Router v6, l’introduction du composant <Routes> a apporté plusieurs avantages par rapport au composant <Switch>, qui était obsolète dans les versions précédentes.

Examinons les avantages de l’utilisation de <Routes> pour gérer la logique de routage dans vos applications React.

1. Routage imbriqué amélioré

Le  composant <Routes> permet d’améliorer les configurations de routage imbriqué par rapport à <Switch>. Avec , vous pouvez définir facilement des itinéraires imbriqués en imbriquant des composants <Route> dans d’autres composants <Route>, ce qui rend la gestion de structures de routage complexes plus intuitive et mieux organisée.

Cela peut simplifier la gestion de la logique de routage dans les grandes applications comportant plusieurs niveaux d’itinéraires imbriqués.

<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. Correspondance dynamique des routes

<Routes> offre une plus grande flexibilité dans la correspondance et le rendu des itinéraires de manière dynamique en fonction des paramètres de la route. Cela permet un routage plus dynamique et axé sur les données dans votre application.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:userId" element={<UserProfile />} />
  <Route path="/products/:productId" element={<ProductDetail />} />
</Routes>
3. Amélioration de la gestion des erreurs

<Routes> le site offre une meilleure gestion des erreurs pour les itinéraires non appariés. Si un itinéraire n’est pas trouvé, <Routes> affiche automatiquement un composant « Not Found » ou un composant d’erreur personnalisé que vous pouvez définir.

Cela permet d’améliorer l’expérience de l’utilisateur en gérant de manière élégante les URL non valides ou les itinéraires qui n’existent pas dans votre application.

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

2. Rétrograder la version de react-router-dom à 5 ou moins

Si vous préférez continuer à utiliser <Switch> dans votre projet, vous pouvez corriger l’erreur en rétrogradant la version de react-router-dom à 5 ou moins.

Cette solution peut être viable si vous avez un projet existant qui a été construit en utilisant une version plus ancienne de React Router. Pour cela, désinstallez d’abord la dernière version de React Router que vous avez installée à l’aide de la commande ci-dessous :

npm uninstall react-router-dom

Vous pouvez maintenant utiliser cette commande pour installer la dernière version majeure qui incluait le composant <Switch>, à savoir la version 5.2.0 :

npm install [email protected]

Résumé

Dans cet article, vous avez découvert l’erreur « ‘Switch’ is not exported from ‘react-router-dom’ » dans React et exploré quelques façons de la corriger. Vous avez également appris les avantages de l’utilisation du nouveau composant <Routes> par rapport au composant obsolète <Switch>.

Lorsque vous démarrez un nouveau projet, il est recommandé de toujours utiliser la dernière version de React Router, car elle offre des améliorations significatives et des mises à jour continues.

Cependant, supposons que vous travaillez sur un projet existant et que vous n’avez pas le temps de mettre à jour votre code en profondeur pour utiliser la nouvelle syntaxe et les nouveaux composants de React Router v6. Dans ce cas, continuez à utiliser l’ancienne version de React Router qui fonctionne avec votre code.

À vous de jouer : Avez-vous déjà rencontré ce problème ? Comment l’avez-vous résolu ? Avez-vous utilisé d’autres approches qui ne sont pas abordées dans cet article ? Faites-nous en part dans les commentaires !