Un tour de montagnes russes avec useHistory / Blogs / Perficient

Les applications React nécessitent souvent une navigation entre différents composants et pages. Le utiliserHistorique hook, fourni par React Router, simplifie la navigation en donnant accès à l’objet historique du navigateur. Dans ce blog, nous explorerons le utiliserHistorique hook, comprenez son implémentation et voyez des exemples pratiques de la façon dont il améliore la navigation dans les applications React.

Comprendre l’historique d’utilisation

Le hook useHistory fait partie de la bibliothèque React Router, spécialement conçue pour gérer la navigation dans les applications React. Il permet aux composants d’interagir avec l’objet historique du navigateur, permettant ainsi la navigation par programmation.

Importation de useHistory :

Pour commencer à utiliser utiliserHistorique pour votre application React, importez-la depuis réagir-routeur-dom:

import { useHistory } from "react-router-dom";

Accéder à l’objet historique

Une fois importé, vous pouvez appeler useHistory() dans votre composant React pour obtenir l’objet historique :

 const history = useHistory();

Voici quelques méthodes (ou attributs) couramment utilisées de l’objet history renvoyé par useHistory et leurs objectifs :

Méthodes de navigation

pousser(chemin, [state])

Logique

Push est utilisé pour parcourir un nouveau chemin en ajoutant une nouvelle entrée à la pile historique. Il vous permet de fournir un objet d’état facultatif associé à la dernière entrée de l’historique.

Exemple

//JSX
    const history = useHistory();
    history.push({
      pathname: "/new-path",
      state: "New Page",
    });

L’exemple ci-dessus utilise histoire.push pour naviguer vers /nouveau chemin et transmet les informations fournies dans le État.

import React from "react";
import { useLocation } from "react-router-dom";
import Heading from "../components/useHistory/Heading";

const New = () => {
  const location = useLocation();
  let data = location.state;
  return (
    <div>
      <Heading>{data}</Heading>
    </div>
  );
};

export default New;

Dans l’exemple ci-dessus, lorsque l’utilisateur arrive à /new-path, vous pouvez accéder à l’état passé (Nouvelle page) via l’objet location. Si vous utilisez des composants fonctionnels, vous pouvez y accéder via le hook useLocation de React-Router-dom. Pour connaître l’emplacement, veuillez consulter mon profil.
Cette méthode de transmission de l’état est utile pour envoyer des données sur des itinéraires qui n’ont pas besoin de faire partie de l’URL.

remplacer(chemin, [state])

Logique

Vous utilisez la fonction pour remplacer l’entrée actuelle sur la pile d’historique par une nouvelle. Ceci est utile lors de la mise à jour du chemin actuel sans ajouter une nouvelle entrée d’historique.

Exemple

//JSX
const history = useHistory();
history.replace({
  pathname: "/updated-path",
  state: "Update Page",
});

import React from "react";
import { useLocation } from "react-router-dom";
import Heading from "../components/useHistory/Heading";

const Update = () => {
  const location = useLocation();
  let data = location.state;
  return <Heading>{data}</Heading>;
};

export default Update;

Dans cet exemple, le ClickHandler déclenche historique.remplacer au lieu de histoire.push pour naviguer vers /page-détails et passer informations sur l’état dans l’état. historique.remplacer écrase l’entrée actuelle de l’historique, éliminant ainsi la possibilité d’y revenir pendant histoire.push ajoute une nouvelle entrée, permettant la navigation arrière.

retourner()

Logique

GoBack simule un clic sur le bouton Précédent du navigateur. Il remonte d’une étape dans l’historique du navigateur.

Exemple

const goBackInHistory = () => {
  history.goBack();
};

aller de l’avant()

Logique

GoForward simule un clic sur le bouton Suivant dans le navigateur. Il avance d’une étape dans l’historique du navigateur.

Exemple

const goForwardInHistory = () => {
  history.goForward();
};

Lorsque vous cliquez sur le bouton, clickHandler déclenche history.goForward(), simulant l’utilisateur avançant dans l’historique du navigateur.

aller(n)

Logique

La fonction go de JavaScript vous permet de naviguer vers l’avant ou vers l’arrière dans l’historique du navigateur en spécifiant un nombre d’étapes positif ou négatif.

Exemple

const goTwoStepsForward = () => {
  history.go(2);
};

Lorsque vous cliquez sur le bouton, clickHandler déclenche history.go(2), avançant de deux pas dans l’historique du navigateur.

bloc

Logique

Le histoire.block La fonction de React Router affiche aux utilisateurs une boîte de dialogue de confirmation lorsqu’ils tentent de quitter la page actuelle. Cette fonctionnalité permet d’empêcher les utilisateurs de quitter accidentellement une page sans enregistrer des informations ou des modifications importantes.

Exemple

import React from "react";
import { useEffect } from "react";
import { useHistory } from "react-router-dom";
import Heading from "../components/useHistory/Heading";
function Block() {
  const history = useHistory();
  useEffect(() => {
    const unblock = history.block(
      "Are you sure you want to leave this page? Your changes may not be saved."
    );

    return () => {
      unblock();
    };
  }, [history]);
  return <Heading>Block Page</Heading>;
}

export default Block;

const toBlockPath = () => {
  history.push("/block-path");
};

Dans cet exemple, lorsque le Composant de bloc est rendu, on l’appelle histoire.block, et un message sera affiché à l’utilisateur lorsqu’il essaiera de quitter la page. Le Bloc function renvoie une fonction pour débloquer la navigation, que nous nettoyons dans le fichier utiliserEffet fonction de nettoyage du hook pour éviter les fuites de mémoire.

Lorsque l’utilisateur clique sur le bouton « Enregistrer », le versBlockPath La fonction est appelée, qui enregistre les données du formulaire et permet ensuite la navigation vers le /chemin-bloc page en appelant histoire.push.

Propriétés supplémentaires

longueur:

Cette propriété indique le nombre d’entrées dans la pile historique.

Exemple

const numberOfEnteries = history.length

action

Cette propriété renvoie l’action de navigation actuelle, telle que « PUSH », « REPLACE » ou « POP ».

Exemple

const currentAction = history.action;

Combinons toutes les méthodes que nous avons vues et utilisons-les pour créer une application React afin de mieux les comprendre :

import React from "react";
import { useHistory } from "react-router-dom";

import "./NavigationDemo.css";

const NavigationDemo = () => {
  const history = useHistory();

  const currentAction = history.action;

  const navigateToNewPath = () => {
    history.push({
      pathname: "/new-path",
      state: "New Page",
    });
  };

  const replaceCurrentPath = () => {
    history.replace({
      pathname: "/updated-path",
      state: "Update Page",
    });
  };

  const goBackInHistory = () => {
    history.goBack();
  };

  const goForwardInHistory = () => {
    history.goForward();
  };

  const goTwoStepsForward = () => {
    history.go(2);
  };

  const toBlockPath = () => {
    history.push("/block-path");
  };

  
  return (
    <div className="container">
      <h1>React Router Navigation Demo</h1>
      <button onClick={navigateToNewPath}>Navigate to New Path</button>
      <button onClick={replaceCurrentPath}>Replace Current Path</button>
      <button onClick={goBackInHistory}>Go Back</button>
      <button onClick={goForwardInHistory}>Go Forward</button>
      <button onClick={goTwoStepsForward}>Go Two Steps Forward</button>
      <button onClick={toBlockPath}>save</button>
      <button>{currentAction}</button>
      <p>Number of Entries in History: {history.length}</p>
      <p>Current Action: {history.action}</p>
    </div>
  );
};

export default NavigationDemo;

Sortir

Conclusion

L’intégration du hook useHistory dans vos composants React permet des interfaces utilisateur dynamiques et navigables. Que vous ajoutiez de nouvelles entrées, mettiez à jour des parcours existants ou parcouriez l’historique, les fonctionnalités de useHistory permettent aux développeurs de créer des expériences utilisateur transparentes et attrayantes.