React中如何在用户手动刷新页面时重定向至指定路由？

一、修复手动刷新重定向，避免返回页面时自动跳转 #

你的代码问题出在localStorage是持久化存储——即使用户从其他页面返回，之前设置的redirectAfterRefresh标记依然存在，导致进入页面就触发重定向。要区分手动刷新和页面返回导航，可以结合浏览器的导航类型判断来实现：

修正后的代码 #

import { useEffect } from 'react';

const RefreshRedirect = () => {
  useEffect(() => {
    // 获取当前页面的导航类型
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    const isManualRefresh = navigationEntry?.type === 'reload';

    if (isManualRefresh) {
      // 仅手动刷新时执行重定向
      window.location.href = "/ndr";
    }
  }, []);

  return null; // 组件无需渲染可视内容
};

export default RefreshRedirect;

原理说明 #

• performance.getEntriesByType('navigation')[0].type会返回当前页面的导航触发类型：
  • reload：用户手动刷新页面（包括F5、浏览器刷新按钮）
  • back_forward：通过浏览器前进/后退按钮返回页面
  • navigate：正常进入页面（如链接跳转、地址栏输入）
• 仅当类型为reload时执行重定向，彻底避免返回页面时的误触发。

二、跳转至其他URL前显示提示弹窗 #

分两种场景处理：

1. 页面刷新/关闭时的提示 #

使用window.onbeforeunload事件，注意：多数浏览器会强制使用系统默认提示文案，自定义文案可能不生效：

useEffect(() => {
  const handleBeforeUnload = (e) => {
    // 必须设置returnValue才能触发提示
    e.preventDefault();
    e.returnValue = '';
    return '';
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

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

2. 单页应用内路由跳转时的提示 #

如果是React Router环境，v5版本直接用Prompt组件：

import { Prompt } from 'react-router-dom';

const YourPageComponent = () => {
  const needPrompt = true; // 根据业务逻辑控制是否启用提示

  return (
    <>
      <Prompt
        when={needPrompt}
        message="你确定要离开当前页面吗？"
      />
      {/* 页面内容 */}
    </>
  );
};

React Router v6版本需配合useBlocker实现：

import { useBlocker } from 'react-router-dom';

const YourPageComponent = () => {
  // 判断是否需要拦截路由跳转
  const blocker = useBlocker(({ currentLocation, nextLocation }) => {
    return currentLocation.pathname !== nextLocation.pathname;
  });

  useEffect(() => {
    if (blocker.state === 'blocked') {
      if (window.confirm('你确定要离开当前页面吗？')) {
        blocker.proceed();
      } else {
        blocker.reset();
      }
    }
  }, [blocker]);

  return <div>页面内容</div>;
};

内容的提问来源于stack exchange，提问作者lakhera24