如果使用者重新載入頁面，如何將使用者重新導向到另一個頁面？

Question

在反應中，我嘗試使用 onunload 和 onbeforeunload 在重新加載後將用戶從當前頁面重定向到另一個頁面。但第一次重新載入後，它顯示網址已更改並再次返回當前頁面。第二次重新載入後，它會轉到重定向頁面。 這些是我嘗試過的一些程式碼...

測試 001：確認/點擊「離開頁面」按鈕後，它應該重定向。事實上，它會轉到該頁面並重定向到上一頁。 >_<<

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>

測試002：然後我認為可能是計時問題，我設定了一個計時器。現在事情變得更糟了！它不會去那裡。

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

試試這個：

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!
;
};

導出預設的MyComponent;

Answer 2

瀏覽器「彈跳效應」或「雙重重新載入」問題，也就是頁面在嘗試使用 beforeunload 事件重定向使用者後重新載入兩次，由於瀏覽器安全措施的原因，可能很難完全阻止。但是，您可以採用某些技術來最大程度地減少其影響。 一種有效的方法是將標誌資料儲存到全域某個位置，您可以在其中追蹤該使用者重新載入該頁面。

這個人以某種方式解決了這個問題

我有另一個解決方案，就是在 localstorage / sessionStorage 中儲存一個標誌，然後在重定向成功時銷毀它。下面是程式碼，您可以按照自己的方式使用它。

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