在反應中，我嘗試使用 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]);
試試這個：
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 returnHello, World! ;
};導出預設的MyComponent;
瀏覽器「彈跳效應」或「雙重重新載入」問題，也就是頁面在嘗試使用 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. } },[])