Comment corriger l'erreur "Switch' is not exported from 'react-router-dom" ?

La bibliothèque "React Router" est une des bibliothèques les plus utilisées par les développeurs de sites avec le framework React. Elle permet de gérer l'ensemble des liens permettant de naviguer au sein de votre site web ou application. Elle fonctionne avec toutes les variantes de React. Si, quand vous développez votre application, vous rencontrez le message d'erreur "'Switch' is not exported from 'react-router-dom'", cela montre un problème de compatibilité entre votre code et la version de "React router".

La balise "<Switch>" est utilisée pour gérer un ensemble de routes. Cette balise va renvoyer la route qui correspond au modèle indiqué dans la recherche. Il existe dans "React Router" des motifs d'URL qui acceptent des paramètres qui varient. La balise "<Switch>" permet de gérer ces cas.

import { Switch, Route } from "react-router-dom";
<Switch>
	<Route path="/accueil">
		</Accueil>
	</Route>
	<Route path="/:article">
		<Article/>
	</Route>
</Switch>

Dans cet exemple, la mention ":article" indique que le composant "Article" est affiché pour n'importe quelle URL, sauf si l'on écrit "/accueil". Dans ce cas, c'est le composant "Accueil" qui est affiché. Sans la balise "Switch", le site chercherait un article appelé "Accueil", en plus d'afficher le composant "Accueil".

Si, en utilisant ce code, vous obtenez le message d'erreur "Switch' is not exported from 'react-router-dom", cela veut dire que vous utilisez une version de "React router" qui est au moins la version 6. Depuis la version 6, la balise "Switch" a été remplacée par la balise "Routes". Cette nouvelle balise permet notamment d'utiliser des URL relatives. Vous devez donc changer les balises ainsi que la directive d'import dans votre code.

import { Routes, Route } from "react-router-dom";
<Routes>
	//À partir de la version 6, on peut utiliser l'attribut "element" pour spécifier un composant simple
	<Route path="/accueil" element={<Accueil />}/>
<Route path="/:article" element="{<Article/>}">
</Switch>

La bibliothèque propose un guide de migration dans sa documentation, afin de vous aider à intégrer et maitriser toutes les nouveautés de cette version 6 : https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md.

JavaScript