Redirections (`Navigate`)

Apprenez à utiliser le composant Navigate de React Router pour implémenter des redirections déclaratives après une action, pour d'anciennes URLs ou pour protéger des routes.

Le besoin de rediriger les utilisateurs

Dans le cycle de vie d'une application web, il est fréquent de devoir rediriger l'utilisateur d'une URL vers une autre. Les raisons peuvent être multiples : rediriger un utilisateur vers son tableau de bord après une connexion réussie, envoyer un utilisateur non authentifié vers la page de connexion lorsqu'il tente d'accéder à une page protégée, rediriger une ancienne URL qui n'existe plus vers une nouvelle adresse pour préserver le référencement (SEO) ou éviter les erreurs 404, ou simplement diriger l'utilisateur vers une route par défaut après une certaine action.

React Router fournit un moyen déclaratif et intégré pour gérer ces scénarios de redirection directement au sein de votre structure de routes ou de la logique de vos composants : le composant ``.

Le composant `` : Rediriger de manière déclarative

Le composant `` est l'outil principal pour effectuer des redirections lorsque vous le rendez dans votre arbre de composants. Son fonctionnement est simple : dès qu'il est rendu, il interrompt le processus de rendu à cet endroit et provoque une navigation vers l'URL spécifiée.

Ses props essentielles sont :

`to` (obligatoire) : Une chaîne de caractères indiquant le chemin de destination vers lequel rediriger l'utilisateur (ex: `/login`, `/dashboard`, `../autre-page`). Peut aussi être un nombre pour naviguer dans l'historique (ex: `to={-1}` pour revenir en arrière), bien que ce soit moins courant pour une redirection typique.
`replace` (optionnel, mais fortement recommandé pour la plupart des redirections) : Un booléen. Si `true`, la nouvelle URL remplacera l'entrée actuelle dans l'historique de navigation au lieu d'en ajouter une nouvelle. C'est généralement le comportement souhaité pour une redirection (par exemple, après une connexion, on ne veut pas que l'utilisateur puisse revenir à la page de connexion avec le bouton "précédent"). Par défaut, `replace` est `false`.
`state` (optionnel) : Permet de passer un état de localisation (un objet) à la route de destination, accessible via `useLocation`. Utile pour passer des informations contextuelles lors de la redirection (par exemple, l'URL d'origine avant la redirection vers le login).

L'utilisation la plus courante de `` se fait dans le cadre d'un rendu conditionnel.

Cas d'usage courants du composant ``

1. Redirection après authentification / Protection de route : C'est l'un des cas les plus fréquents. Si un utilisateur tente d'accéder à une page protégée sans être connecté, on le redirige vers la page de connexion.

// Composant pour une route protégée
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from './context/AuthContext'; // Hook personnalisé pour l'état d'auth

function RouteProtegee({ children }) {
  const { utilisateur } = useAuth();
  const location = useLocation(); // Pour mémoriser d'où vient l'utilisateur

  if (!utilisateur) {
    // Utilisateur non connecté, redirection vers /login
    // On utilise 'replace' et on passe l'URL d'origine dans 'state'
    return ;
  }

  // Utilisateur connecté, on rend le contenu demandé
  return children;
}

// Utilisation dans la configuration des routes

      
    
  }
/>

2. Redirection depuis une ancienne URL : Si une page a été déplacée ou renommée, vous pouvez configurer une route pour l'ancien chemin qui redirige automatiquement vers le nouveau.

// Dans la configuration des Routes
import { Navigate } from 'react-router-dom';

// ...

  } />
  {/* Redirection permanente (implicite avec replace={true}) de l'ancien chemin */}
  } />
  {/* ... autres routes */}

// ...

3. Redirection par défaut : Parfois, vous voulez qu'une URL spécifique redirige immédiatement vers une autre, par exemple, une URL de base vers une sous-section par défaut.


  } />
  } />
  } />

Bien que cela fonctionne, pour les redirections par défaut au sein de routes imbriquées, l'utilisation d'une `` est souvent considérée comme plus idiomatique et préférable (comme vu dans le chapitre sur les routes imbriquées).

Le composant `` est donc un outil déclaratif puissant pour gérer les flux de navigation qui nécessitent un changement d'URL basé sur certaines conditions ou configurations, s'intégrant naturellement dans la logique de rendu conditionnel de React et la structure des routes de React Router.

◄ Précédent Suivant ►

く