Navigation programmatique (`useNavigate`)

Déclencher la navigation depuis la logique javascript

Jusqu'à présent, nous avons vu comment la navigation est initiée par l'utilisateur cliquant sur des composants `` ou ``, ou comment elle est gérée de manière déclarative via le rendu du composant ``. Cependant, il existe de nombreux scénarios où vous devez déclencher une navigation de manière impérative, c'est-à-dire directement depuis votre code JavaScript, en réponse à un événement ou à l'issue d'une opération.

Pensez par exemple à la soumission réussie d'un formulaire : après que les données ont été envoyées au serveur et que la réponse est positive, vous voulez rediriger l'utilisateur vers une autre page (comme son tableau de bord ou une page de confirmation). Ou encore, un bouton personnalisé qui effectue une action puis navigue, ou une redirection automatique après un certain délai. Dans ces cas, la navigation n'est pas directement liée au rendu d'un élément spécifique mais est le résultat d'une logique applicative.

Pour ces besoins de navigation programmatique (ou impérative), React Router v6 fournit le hook `useNavigate`.

Le hook `useNavigate` en action

Le hook `useNavigate` est très simple à utiliser. Lorsqu'il est appelé à l'intérieur d'un composant fonctionnel, il retourne une fonction (conventionnellement nommée `navigate`). Vous pouvez ensuite appeler cette fonction `navigate` avec le chemin de destination pour déclencher la navigation.

Voici les étapes pour l'utiliser :

1. Importez le hook depuis `react-router-dom`.

2. Appelez `useNavigate()` au niveau supérieur de votre composant fonctionnel pour obtenir la fonction `navigate`.

3. Appelez `navigate(chemin)` lorsque vous souhaitez effectuer la navigation.

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

function FormulaireConnexion() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate(); // Obtenir la fonction navigate

  const handleSubmit = async (event) => {
    event.preventDefault();
    setError('');
    try {
      // Simuler un appel API pour la connexion
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

      if (!response.ok) {
        throw new Error('Identifiants incorrects');
      }
      
      const userData = await response.json();
      // Connexion réussie !
      // Utiliser navigate pour rediriger vers le tableau de bord
      navigate('/dashboard'); // Navigation programmatique ici !

    } catch (err) {
      setError(err.message);
    }
  };

  return (
    

      {error && 
{error}
}
      

        Email:
         setEmail(e.target.value)} required />
      
      

        Mot de passe:
         setPassword(e.target.value)} required />
      
      Se connecter
    
  );
}

export default FormulaireConnexion;

Dans cet exemple, après la validation réussie de la connexion (simulée par l'appel `fetch`), `navigate('/dashboard')` est appelé, provoquant la redirection de l'utilisateur vers son tableau de bord.

Options avancées et navigation dans l'historique

La fonction `navigate` retournée par `useNavigate` accepte également un deuxième argument optionnel, un objet qui peut contenir les propriétés suivantes :

• `replace: boolean` : Comme pour ``, si `true`, remplace l'entrée actuelle dans l'historique au lieu d'en ajouter une nouvelle. C'est souvent utile après une connexion ou une action destructive pour éviter le retour via le bouton "précédent".

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

• `state: any` : Permet de passer des données à la nouvelle localisation, accessibles via `useLocation` dans le composant cible.

  navigate('/profil', { state: { message: 'Profil mis à jour !' } });

De plus, `navigate` peut être appelée avec un nombre pour naviguer dans l'historique du navigateur, simulant les boutons "précédent" et "suivant" :

• `navigate(-1)` : Revient à la page précédente (équivalent à `history.back()`).
• `navigate(-2)` : Revient deux pages en arrière.
• `navigate(1)` : Avance à la page suivante (si elle existe dans l'historique, équivalent à `history.forward()`).

import React from 'react';
import { useNavigate } from 'react-router-dom';

function BoutonRetour() {
  const navigate = useNavigate();

  return (
     navigate(-1)}>
      Retour
    
  );
}

export default BoutonRetour;

Quand utiliser `useNavigate` vs `` ?

Il est important de distinguer quand utiliser l'approche impérative (`useNavigate`) et l'approche déclarative (``).

Utilisez `useNavigate` lorsque la navigation doit être déclenchée en réponse à une interaction utilisateur spécifique (clic sur un bouton qui fait plus qu'une simple navigation), après l'exécution d'une logique asynchrone (appel API), ou à l'intérieur de gestionnaires d'événements ou de hooks `useEffect`.

Utilisez le composant `` lorsque la redirection doit se produire dès qu'une certaine condition est remplie pendant le rendu du composant. Typiquement pour protéger des routes ou rediriger depuis des chemins spécifiques de manière déclarative dans votre structure ``.

En somme, `useNavigate` est l'outil indispensable pour intégrer la navigation de manière fluide et contrôlée au sein de la logique métier de vos composants React, offrant une flexibilité maximale pour gérer les transitions entre les vues de votre application.