🔄 Navigation Programmatique avec React Router

La navigation programmatique déclenche un changement de route par le code (hookhook
Fonction spéciale de React (useState, useEffect…) permettant d'ajouter état et effets dans un composant fonctionnel. ou APIAPI
Application Programming Interface – interface permettant à deux applications de communiquer entre elles.) plutôt que par un lien <Link>. Utile pour : redirection post‑authentification, retour après annulation, étape suivante d’un wizard, gestion d’erreurs.

🧠 Fondamentaux

useNavigate() retourne une fonction navigate(to, options?) qui pousse une entrée dans l’historique (par défaut). Options clés : { replace: true, state: any }.

📦 Exemple minimal

import { useNavigate } from 'react-router';
 
function FormComponent() {
  const navigate = useNavigate();
  function handleSubmit(e) {
    e.preventDefault();
    // ... traitement
    navigate('/success');
  }
  return <form onSubmit={handleSubmit}>{/* champs */}</form>;
}

♻️ Remplacer l’entrée d’historique

Lorsque l’on ne veut pas que l’utilisateur revienne sur la page précédente (ex: après login).

navigate('/dashboard', { replace: true });

📦 Passer un état de navigation

Transmettre des données éphémères sans polluer l’URLURL
Uniform Resource Locator – adresse unique identifiant une ressource sur le web..

navigate('/checkout', { state: { fromCart: true, total: 42.9 } });

Dans la cible :

import { useLocation } from 'react-router';
const { state } = useLocation();

🔁 Navigation relative & historique

navigate(-1); // revenir en arrière
navigate(1);  // aller en avant (si entrée disponible)

🚦 Guards & conditions

Rediriger si condition non respectée (auth, rôle, données).

function Protected({ isAuth }) {
  const navigate = useNavigate();
  if (!isAuth) {
    navigate('/login', { replace: true });
    return null;
  }
  return <p>Zone protégée</p>;
}

🪜 Combiner avec paramètres

function GoUser({ id }) {
  const navigate = useNavigate();
  return <button onClick={() => navigate(`/users/${id}`)}>Voir user {id}</button>;
}

🧪 Gestion d’erreur + redirection

try {
  await submitData(form);
  navigate('/done');
} catch (e) {
  navigate('/error', { state: { message: e.message } });
}

🛡️ Accessibilité

Après navigation programmée vers une vue structurée, placer le focus sur un titre ou un conteneurconteneur
Instance exécutable d'une image Docker, isolée du système hôte..

useEffect(() => { document.getElementById('page-title')?.focus(); }, []);

Utiliser tabIndex="-1" sur le titre ciblé pour autoriser le focus.

💤 Lazy + navigate

Fonctionne si la route cible est lazy : la transition charge le chunk nécessaire.

🛠️ Exercices

1. Après login simulé, rediriger vers /profil avec replace.
2. Ajouter un bouton « Revenir » qui désactive si historique vide (tester window.history.length).
3. Passer un état { flash: 'Profil mis à jour' } puis l’afficher et l’effacer.
4. Implémenter une redirection automatique vers /login si token absent.

import { BrowserRouter, Routes, Route, useNavigate, useLocation } from 'react-router';
 
function Login() {
  const navigate = useNavigate();
  function handleLogin() {
    // fake token
    localStorage.setItem('token', 'abc');
    navigate('/profil', { replace: true, state: { flash: 'Bienvenue !' } });
  }
  return <button onClick={handleLogin}>Se connecter</button>;
}
 
function Profil() {
  const { state } = useLocation();
  return <div>{state?.flash && <p>{state.flash}</p>}<h2>Profil</h2></div>;
}
 
function Guard({ children }) {
  const navigate = useNavigate();
  const token = localStorage.getItem('token');
  useEffect(() => { if (!token) navigate('/login', { replace: true }); }, [token, navigate]);
  return token ? children : null;
}
 
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/profil" element={<Guard><Profil /></Guard>} />
      </Routes>
    </BrowserRouter>
  );
}

📚 Ressources

• API navigate : https://reactrouter.com/en/main/hooks/use-navigate 
• Location & statestate
  État local d'un composant React, dont le changement déclenche un nouveau rendu. : https://reactrouter.com/en/main/hooks/use-location 
• Accessibilité focus SPASPA
  Single Page Application – application web qui charge une seule page et met à jour dynamiquement le contenu. : https://www.w3.org/WAI/ARIA/apg/practices/landmarks/ 

⚡ TLDR

• useNavigate() pour déclencher navigation
• navigate(to, { replace, state }) pour options
• navigate(-1) / navigate(1) pour historique
• Guards : vérifier auth puis rediriger (souvent replace: true)
• Focus manuel après navigation pour accessibilité
• Éviter redirections dans rendu profond sans condition claire

Voir aussi : /react/routage/dynamiques pour paramètres et /react/donnees pour chargement conditionnel.