在反应中,我尝试使用 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]);
P粉9261742882024-01-30 00:55:59
试试这个:
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;
P粉9389363042024-01-30 00:49:02
浏览器“弹跳效应”或“双重重新加载”问题,即页面在尝试使用 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. } },[])