Bagaimanakah saya boleh mengubah hala pengguna ke halaman lain jika pengguna memuat semula halaman tersebut?

Question

Sebagai tindak balas, saya cuba menggunakan onunload dan onbeforeunload untuk mengubah hala pengguna dari halaman semasa ke halaman lain selepas memuat semula. Tetapi selepas muat semula pertama ia menunjukkan bahawa url telah berubah dan kembali ke halaman semasa sekali lagi. Selepas muat semula kedua, ia pergi ke halaman ubah hala. Ini adalah beberapa kod yang saya telah cuba...

Ujian 001: Selepas mengesahkan/mengklik butang "Tinggalkan Halaman", ia harus mengubah hala. Malah, ia pergi ke halaman itu dan mengubah hala ke halaman sebelumnya. >_<<

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>

Ujian 002: Kemudian saya fikir ia mungkin isu masa dan saya menetapkan pemasa. Sekarang keadaan menjadi lebih teruk! Ia tidak akan pergi ke sana.

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

Cuba ini:

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 <redirect to="path/to/redirect">;
}

 // Render your component content here
 return <div>Hello, World!</div>;
};</redirect>

Eksport MyComponent lalai;

Answer 2

Isu "kesan lantunan" atau "muat semula berganda" penyemak imbas, di mana halaman dimuat semula dua kali selepas cuba mengubah hala pengguna menggunakan acara sebelum muat turun, mungkin sukar untuk dihalang sepenuhnya disebabkan oleh langkah keselamatan penyemak imbas. Walau bagaimanapun, terdapat teknik tertentu yang boleh anda gunakan untuk meminimumkan kesannya. Satu pendekatan yang berkesan ialah menyimpan data bendera di suatu tempat di seluruh dunia, di mana anda boleh menjejaki pengguna yang memuatkan semula halaman tersebut.

Lelaki ini entah bagaimana menyelesaikan masalah ini

Saya ada penyelesaian lain iaitu menyimpan bendera dalam localstorage/sessionStorage dan kemudian memusnahkannya apabila ubah hala berjaya. Di bawah ialah kod, anda boleh menggunakannya dengan cara yang anda mahukan.

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.
    }
  },[])