Stratégies Efficaces pour Déceler les Départs des Utilisateurs avec React Router v6.0.2 (2024)

Lorsqu'il s'agit d'optimiser l'expérience utilisateur avec React Router v6.0.2, la détection des départs de page est cruciale. Nous présentons ici des stratégies pratiques pour mettre en œuvre des avertissements de sortie de page, garantissant ainsi une expérience de navigation fluide et conviviale.

1. Améliorer l'Expérience Utilisateur : Mise en Place des Avertissements de Sortie de Page avec React Router

Pour détecter le départ d'un utilisateur d'une page en React avec react-router, nous utilisons le composant Prompt fourni par react-router. Voici comment le mettre en œuvre :

import { Prompt } from 'react-router';

const MonComposant = () => (
  <>
    <Prompt when={devraitBloquerNavigation} message='Vous avez des modifications non enregistrées, êtes-vous sûr de vouloir partir?' />
    {/* Votre JSX de composant */}
  </>
);

Le paramètre when détermine si l'invite doit être affichée en fonction de la présence de modifications non enregistrées. Le paramètre message est le message affiché dans l'invite.

Pour bloquer la navigation, utilisez l'événement window.onbeforeunload dans la méthode componentDidUpdate de votre composant.

componentDidUpdate = () => {
  if (devraitBloquerNavigation) {
    window.onbeforeunload = () => true;
  } else {
    window.onbeforeunload = undefined;
  }
}

Assurez-vous de nettoyer l'événement window.onbeforeunload dans la méthode componentWillUnmount pour éviter les fuites de mémoire.

componentWillUnmount() {
  window.onbeforeunload = null;
}

Cette approche affiche une boîte de dialogue native du navigateur lorsque l'utilisateur tente de quitter la page avec des modifications non enregistrées.

2. Améliorer l'Expérience Utilisateur : Afficher un Avertissement pour les Données de Formulaire Non Enregistrées à la Sortie de la Page

Pour afficher un avertissement pour les données de formulaire non enregistrées à la sortie de la page, créez un composant FormPrompt.

import { useEffect } from "react";

export const FormPrompt = ({ hasUnsavedChanges }) => {
  useEffect(() => {
    const onBeforeUnload = (e) => {
      if (hasUnsavedChanges) {
        e.preventDefault();
        e.returnValue = "";
      }
    };

    window.addEventListener("beforeunload", onBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", onBeforeUnload);
    };
  }, [hasUnsavedChanges]);

  return null;
};

Utilisez ce composant dans vos formulaires pour avertir les utilisateurs des modifications non enregistrées.

<FormPrompt hasUnsavedChanges={isDirty} />

Maintenant, lorsque les utilisateurs ont des modifications non enregistrées et tentent de quitter la page, une boîte de dialogue de confirmation apparaîtra.

3. Améliorer l'Expérience Utilisateur avec le Hook useBeforeUnload de React Router pour la Préservation de l'État

Le hook useBeforeUnload de React Router est une manière pratique de travailler avec l'événement window.onbeforeunload. Il vous permet de sauvegarder l'état important de l'application sur une page web, comme dans le stockage local du navigateur, avant qu'un utilisateur ne quitte la page.

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

function MonFormulaire() {
  const [state, setState] = React.useState(null);

  useBeforeUnload(React.useCallback(() => {
    localStorage.stuff = state;
  }, [state]));

  React.useEffect(() => {
    if (state === null && localStorage.stuff != null) {
      setState(localStorage.stuff);
    }
  }, [state]);

  return <>{/*... */}</>;
}

En utilisant useBeforeUnload, vous vous assurez que si les utilisateurs reviennent sur votre page, vous pouvez facilement restaurer leurs informations d'état précédentes, améliorant ainsi l'expérience utilisateur globale.

Conclusion

En mettant en œuvre ces stratégies avec React Router v6.0.2, vous pouvez créer une expérience utilisateur exceptionnelle, avec des avertissements précis et personnalisés pour les départs de page. Choisissez la stratégie qui correspond le mieux à vos besoins et offrez à vos utilisateurs une navigation sans heurts et sécurisée.

Stratégies Efficaces pour Déceler les Départs des Utilisateurs avec React Router v6.0.2 (2024)
Top Articles
Latest Posts
Article information

Author: Barbera Armstrong

Last Updated:

Views: 5743

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Barbera Armstrong

Birthday: 1992-09-12

Address: Suite 993 99852 Daugherty Causeway, Ritchiehaven, VT 49630

Phone: +5026838435397

Job: National Engineer

Hobby: Listening to music, Board games, Photography, Ice skating, LARPing, Kite flying, Rugby

Introduction: My name is Barbera Armstrong, I am a lovely, delightful, cooperative, funny, enchanting, vivacious, tender person who loves writing and wants to share my knowledge and understanding with you.