Comment puis-je rediriger l'utilisateur vers une autre page s'il recharge la page ?

Question

En réaction, j'essaie d'utiliser onunload et onbeforeunload pour rediriger l'utilisateur de la page actuelle vers une autre page après le rechargement. Mais après le premier rechargement, il montre que l'URL a changé et revient à nouveau à la page actuelle. Après le deuxième rechargement, il accède à la page de redirection. Voici quelques codes que j'ai essayés...

Test 001 : Après avoir confirmé/cliqué sur le bouton "Quitter la page", il devrait rediriger. En fait, il accède à cette page et redirige vers la page précédente. >_<<

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

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

  useEffect(() => {
    const handleBeforeUnload = (event) => {
      // Prevent the default dialog box from showing
      event.preventDefault();
      // Redirect the user to the desired page
      history.push('/redirected-page');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

  // Rest of your component code...

  return (
    // JSX for your component...
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.0/react-dom.min.js"></script>

Test 002 : Ensuite, j'ai pensé qu'il s'agissait peut-être d'un problème de timing et j'ai réglé un timer. Maintenant, les choses empirent ! Cela n'ira pas là-bas.

useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();

      // Delay the redirection by 100 milliseconds
      setTimeout(() => {
        history.push('/Applicant-profile');
      }, 100);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

Answer 1

Essayez ceci :

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

const MyComponent = () => {
 const [shouldRedirect, setShouldRedirect] = useState(false);

  useEffect(() => {
   const handleBeforeUnload = (event) => {
    // Custom logic to determine if the page is being reloaded
    // You can check for specific conditions or simply set the flag to true 
   unconditionally
  const isReloading = true;

  if (isReloading) {
    event.preventDefault();
    setShouldRedirect(true);
   }
 };

 window.addEventListener('beforeunload', handleBeforeUnload);

 return () => {
   window.removeEventListener('beforeunload', handleBeforeUnload);
 };
}, []);

if (shouldRedirect) {
 // Replace 'path/to/redirect' with the actual path you want to redirect to
 return ;
}

 // Render your component content here
 return 
Hello, World!
;
};

Exporter le MyComponent par défaut ;

Answer 2

Le problème de « l'effet de rebond » ou du « double rechargement » du navigateur, où une page se recharge deux fois après avoir tenté de rediriger l'utilisateur à l'aide de l'événement beforeunload, peut être difficile à empêcher complètement en raison des mesures de sécurité du navigateur. Cependant, il existe certaines techniques que vous pouvez utiliser pour minimiser son impact. Une approche efficace consiste à stocker les données du drapeau quelque part dans le monde, où vous pouvez suivre cet utilisateur en train de recharger la page.

Ce type a résolu ce problème d'une manière ou d'une autre

J'ai une autre solution qui consiste à stocker un indicateur dans localstorage/sessionStorage puis à le détruire lorsque la redirection réussit. Vous trouverez ci-dessous le code, vous pouvez l'utiliser comme vous le souhaitez.

const current_url = window.location.pathname;

// this function will work only when you do reload. 
  window.onbeforeunload = function () {
    localStorage.setItem("page",current_url) // Store the page URL 
  };

// After first redirection and due to bounce effect will come back to current page.
  useEffect(() => {
  
  // if your localstorage have the key "page and the value is the current page...
    if(localStorage.getItem("page") === current_url){
      
      localStorage.removeItem("page"); // also you have to remove the item from localstorage. 
      history.push("/where_you_want_to redirect") // ... then it will redirect you to somewhere you wish.
    }
  },[])