React中如何检测页面刷新并将用户重定向至指定路径

首先明确核心逻辑边界：浏览器触发页面刷新时，会直接销毁当前React运行上下文，所有组件状态、内存中的路由实例都会被清空，你无法在刷新触发的瞬间通过当前页面挂载的useNavigate完成SPA路由跳转，跳转逻辑必须在刷新后页面重新加载的初始化阶段执行。

方案1：直接通过页面加载类型判断，无额外事件绑定 #

适合不需要提前感知刷新动作、只需要在刷新发生后跳转到指定路径的场景，在应用根组件（路由挂载的最上层组件，通常是App.jsx）中加入判断逻辑即可：

import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  const location = useLocation();
  // 重定向锁，避免重复执行跳转
  const [redirectLocked, setRedirectLocked] = useState(false);

  useEffect(() => {
    // 已经在目标路径/已经执行过重定向，直接终止逻辑，避免死循环
    if (location.pathname === '/error' || redirectLocked) return;

    // 兼容新旧浏览器API，判断当前页面是否由刷新触发加载
    const isRefreshLoad = 
      // 旧版performance API兼容
      performance?.navigation?.type === performance.navigation.TYPE_RELOAD ||
      // 新版W3C标准API
      performance.getEntriesByType('navigation')[0]?.type === 'reload';

    if (isRefreshLoad) {
      setRedirectLocked(true);
      // replace替换路由，避免用户点返回回到刷新前的异常状态
      navigate('/error', { replace: true });
    }
  }, [location.pathname, navigate, redirectLocked]);

  // 原有路由渲染逻辑
  return (
    // 你的<Routes />路由配置
  )
}

注意：必须添加目标路径判断和重定向锁，否则重定向到/error后页面仍处于刷新加载状态，会触发无限重定向循环。

方案2：绑定原生事件感知刷新动作，支持自定义前置逻辑 #

如果你需要在用户触发刷新（按F5、点击浏览器刷新按钮、关闭页面）的瞬间执行自定义逻辑（比如存储临时状态、弹出离开提示），可以绑定beforeunload原生事件配合sessionStorage实现：

import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  const location = useLocation();

  // 绑定刷新/关闭页面前的事件
  useEffect(() => {
    const handleBeforeUnload = () => {
      // 可以在这里执行同步逻辑，比如把临时数据存到sessionStorage
      sessionStorage.setItem('__need_redirect_after_refresh', '1');
      // 如果需要弹出浏览器默认的"确定离开此站点吗"提示，打开下面两行注释
      // e.preventDefault();
      // e.returnValue = '';
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);

  // 页面初始化时检查标记，执行重定向
  useEffect(() => {
    const needRedirect = sessionStorage.getItem('__need_redirect_after_refresh');
    if (needRedirect && location.pathname !== '/error') {
      // 消费完标记立刻删除，避免误触发
      sessionStorage.removeItem('__need_redirect_after_refresh');
      navigate('/error', { replace: true });
    }
  }, [location.pathname, navigate]);

  // 原有路由渲染逻辑
  return (
    // 你的<Routes />路由配置
  )
}

这个方案比单纯判断加载类型更灵活，可以区分用户是首次打开页面，还是主动触发了刷新/关闭动作，按需决定是否执行重定向。

常见踩坑 #

• 不要在beforeunload事件回调里直接调用navigate：这个回调执行完成后浏览器会立刻销毁页面上下文，SPA路由跳转是异步行为，完全不会生效
• 不要用localStorage存重定向标记：localStorage不会随标签页关闭清空，用户后续重新打开页面时可能误触发重定向，sessionStorage的生命周期和标签页绑定，更适合这个场景
• 不要省略重定向终止判断：必须判断当前已经在目标路径时跳过跳转逻辑，否则会触发无限重定向导致页面崩溃

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