useNavigate()

useNavigate() est un hook React fourni par react-router-dom qui retourne une fonction de navigation impérative, permettant de modifier programmatiquement l’URL courante, de manipuler l’historique du navigateur ou de transmettre un état de navigation sans interaction utilisateur directe sur un lien.

Exemples concrets

import { useNavigate, useLocation } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();
  const location = useLocation(); // Pour récupérer l'état de redirection
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    const user = await auth.login(credentials);
    
    if (user) {
      // Redirection avec remplacement + état
      navigate('/dashboard', { 
        replace: true,
        state: { from: location.pathname } 
      });
    }
  };
  
  return <form onSubmit={handleSubmit}>...</form>;
}

// Autres cas :
navigate(-1); // ← Bouton "Retour" personnalisé
navigate('/search', { state: { query: 'react' } }); // Transfert de données

Comparaison clé

Cas d’usage typiques

• Redirection post-authentification (/login → /dashboard)
• Confirmation après soumission de formulaire (/submit → /success)
• Gestion d’accès non autorisé (navigate('/unauthorized'))
• Bouton « Retour » personnalisé (navigate(-1))
• Workflow multi-étapes (onboarding, checkout)

Pourquoi cette conception ?

• Séparation des responsabilités : Navigation déclarative (<Link>) vs impérative (useNavigate)
• Interopérabilité : Compatible avec les hooks React standards (useEffect, useCallback)
• Sécurité renforcée : Contrôle explicite des redirections (vs window.location.href)
• État de navigation : Transmission sécurisée de contexte entre routes via state

useNavigate() est l’outil officiel et indispensable pour toute redirection programmatique dans une SPA React Router v6. Son usage exige rigueur (respect des règles des hooks) et vigilance (sécurisation des cibles), mais il est fondamental pour une expérience utilisateur fluide et sécurisée.