React 如何检测页面刷新并将用户重定向到指定页面

问题修复说明 #

废弃API替换 #

你用到的window.performance.navigation已被Web标准移除，官方推荐使用PerformanceNavigationTiming接口替代，通过以下代码可以获取导航类型：

// 返回值说明：
// 'navigate'：普通路由跳转/链接进入
// 'reload'：页面刷新
// 'back_forward'：前进/后退进入
const getNavType = () => performance.getEntriesByType('navigation')[0]?.type

useEffect写法说明 #

多个useEffect拆分不同职责本身是符合React开发规范的，你原有代码的核心问题是第二个useEffect没有把hasRouteChanged加入依赖数组，存在闭包陷阱，永远读取的是初始的false值，逻辑会失效。 #

优雅实现方案 #

这里提供两种实现，根据你的业务场景选择：

方案1：最简实现（无需额外state） #

仅判断刷新场景直接重定向，适合只需要拦截刷新操作的场景：

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const EligibilityPage = () => {
  const location = useLocation()

  useEffect(() => {
    const navType = performance.getEntriesByType('navigation')[0]?.type
    // 仅刷新场景触发重定向
    if (navType === 'reload') {
      window.location.href = "/personal-details-page"
    }
  }, [location])
}

方案2：稳定实现（sessionStorage辅助判断） #

适合需要严格区分「刷新进入」和「路由跳转进入」的复杂场景，避免前进后退等操作误触发：

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const EligibilityPage = () => {
  const location = useLocation()

  // 路由离开时标记为主动跳转
  useEffect(() => {
    return () => {
      sessionStorage.setItem('isRouteJump', '1')
    }
  }, [location])

  // 页面初始化时判断是否为刷新
  useEffect(() => {
    const navType = performance.getEntriesByType('navigation')[0]?.type
    const isRouteJump = sessionStorage.getItem('isRouteJump')
    
    if (navType === 'reload' && !isRouteJump) {
      window.location.href = "/personal-details-page"
    }
    // 每次进入页面清除标记
    sessionStorage.removeItem('isRouteJump')
  }, [])
}

内容的提问来源于stack exchange，提问作者D.B