Comment résoudre l'erreur 'Redirect' is not exported from 'react-router-dom' ?

La librairie "React-router" est une librairie essentielle quand on travaille avec la librairie JavaScript React. Elle permet de mettre en place un système de routage dans votre application. Si vous souhaitez travailler sur une application avec plusieurs écrans ou un site avec plusieurs pages, c'est un élément très important. Elle permet de définir des routes et d'afficher le ou les bons composants en fonction de l'endroit où vous vous trouvez dans votre application. En travaillant avec "React-router", vous pouvez avoir le message d'erreur "'Redirect' is not exported from 'react-router-dom'". Il est lié à une mise à jour de la librairie.

Si vous venez de mettre à jour la librairie vers la version 6, ou si vous commencez à travailler sur un code avec la librairie, ce message est lié à une des nouveautés de "React-router". Depuis la version 6, le composant "Redirect", qui permet d'effectuer une redirection, n'existe plus. Vous devez maintenant utiliser le composant "Navigate". Ce nouveau composant appelle le Hook "useNavigate", qui sert à effectuer les redirections avant le rendu des composants. Le précédent composant "Navigate" effectuait la redirection pendant le rendu des composants, ce qui est considéré comme dangereux et non sécurisé. L'équipe de développement de la librairie a donc pris la décision de changer ce composant.

// À partir de la version 6
import { Navigate } from "react-router-dom";
return (
  <Navigate to="/accueil" />
)

//Versions 5 et antérieures
import { Redirect } from 'react-router-dom';
return (
  <Redirect to="/accueil" />
)

JavaScript