Objet History dans React Router

1. Historique du routeur React
2. React Router History pour les redirections
3. history.push() dans React Router V4

La navigation est un élément essentiel de toute application moderne. Les frameworks basés sur JavaScript s’appuient généralement sur l’objet d’historique par défaut pour servir de base à leurs différentes solutions de navigation. Cet objet est disponible en tant que propriété de l’objet Window du DOM.

Lors du développement d’applications dans React, les développeurs peuvent utiliser la bibliothèque React Router. Il fournit toutes les fonctionnalités de navigation, y compris un package history, une version améliorée de l’interface d’historique du navigateur. L’objet history de React Router comprend de nombreuses propriétés et méthodes que nous pouvons utiliser pour configurer la navigation, telles que action, location, .push() ou .replace(). Nous verrons comment utiliser au mieux ces propriétés et méthodes pour gérer les besoins de navigation clés dans les sections ci-dessous.

Historique du routeur React

Le package history (ou simplement history en abrégé) est l’outil clé requis pour gérer l’historique des sessions dans le JS. Comme mentionné précédemment, il comprend de nombreuses méthodes, qui sont toutes utiles à leur manière. Pourtant, la méthode history.push() est sans doute la plus importante et sera l’objectif principal de notre guide.

Pile d’historique

Les navigateurs gardent une trace des différentes URL visitées par les utilisateurs. Cet historique de session est appelé pile d’historique et il est nécessaire que les boutons Précédent ou Suivant des navigateurs fonctionnent.

Les objets d’historique ont des propriétés et des méthodes qui peuvent affecter une pile d’historique. Par exemple, la méthode .replace() remplace le chemin le plus récent sur la pile d’historique. La propriété .length nous donne le nombre d’entrées dans la pile.

La méthode .push() est probablement la plus importante et la plus utilisée. Les développeurs l’utilisent pour pousser une entrée dans la pile, redirigeant les utilisateurs vers une autre page. Cette méthode est essentielle, et nous en discuterons en détail dans les parties ultérieures du guide.

location

L’objet de localisation affiche les informations sur le chemin d’accès actuel (et parfois passé) de l’application. React Router rend cet objet disponible plusieurs fois. Par exemple, il est accessible dans le composant Route en tant que propriété de l’objet props. En savoir plus sur le routeur officiel React documentation.

L’objet history a également la propriété location. Cependant, l’objet history est mutable, donc l’utilisation de la valeur de la propriété location n’est pas recommandée. Au lieu de cela, vous pouvez accéder à la location via les accessoires de <Route>. De cette façon, vous pouvez être sûr que vous accédez aux bonnes informations de location.

React Router History pour les redirections

Lors du développement d’une application, vous devez souvent modifier le chemin de l’utilisateur après avoir effectué une action. Pour ce faire, vous devez configurer un gestionnaire d’événements et utiliser la méthode .push() pour rediriger vers un chemin d’accès spécifique.

history.push() dans React Router V5

Depuis l’introduction des crochets, les composants fonctionnels sont devenus beaucoup plus utiles. Avec la sortie de la v5, react-router-dom a également commencé à fournir un hook useHistory() pour accéder plus facilement à l’objet historique. Regardons un exemple pratique :

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

Dans cet exemple, nous avons un simple composant Homepage. Tout d’abord, nous importons le hook useHistory du package react-router-dom. Vous devez installer la version 5 de react-router-dom (ou supérieure) pour que cela fonctionne. Le hook renvoie l’objet history du composant, stocké dans la variable historyObj.

Nous pouvons utiliser la méthode .push(string) susmentionnée dans la fonction de gestionnaire, qui accepte un argument de chaîne. Il pousse la chaîne dans la pile d’historique et emmène l’utilisateur vers le chemin spécifié.

history.push() dans React Router V4

La version 4 de React Router n’inclut pas de hook useHistory, vous devrez donc transmettre l’objet history via props. C’est aussi le seul moyen d’accéder à l'historique dans les composants de classe, qui ne sont pas compatibles avec les hooks.

Vous pouvez naviguer vers un autre chemin en utilisant une méthode .push() dans la fonction de gestionnaire. Regardons cet exemple :

function handleClick() {
  this.props.history.push('/')
}

Pour accéder à l’objet history via les props, vous devez vous assurer que votre composant y a accès. Il y a deux façons de le faire.

1. Utilisez l’attribut component sur <Route> pour le lier à un composant spécifique. Par exemple:

<Route path="/" component={Homepage} />

Dans ce cas, le composant Homepage aura accès à l’objet history via des props.

2. Utilisez l’attribut render pour définir une fonction. Fournissez des accessoires et utilisez la syntaxe suivante :

<Route path="/" render={(props) => <Homepage {...props} />}/>