如何实现指定React页面每1分钟刷新一次，5分钟后停止且切换路由即终止？

你的代码出现无限刷新的核心原因是：每次调用window.location.reload()会让整个页面重新加载，React组件的状态会被完全重置。refreshCount每次刷新后都会回到初始值0，导致useEffect每次都会重新创建定时器，永远满足refreshCount < 5的条件，陷入无限循环。同时原代码没有处理「切换到首页停止刷新」的需求，也没有持久化刷新计数的机制。

我们需要通过本地存储持久化刷新计数，结合路由监听来实现需求。以下是基于react-router-dom的完整解决方案：

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

const RefreshComponent = () => {
  const location = useLocation();
  // 从localStorage读取已刷新次数，页面重启后不会丢失
  const [refreshCount, setRefreshCount] = useState(() => {
    return parseInt(localStorage.getItem('refreshCount')) || 0;
  });
  const [refreshTimer, setRefreshTimer] = useState(null);

  useEffect(() => {
    // 切换到首页时，立即停止刷新并重置计数
    if (location.pathname === '/') {
      if (refreshTimer) {
        clearInterval(refreshTimer);
        setRefreshTimer(null);
      }
      localStorage.removeItem('refreshCount');
      setRefreshCount(0);
      return;
    }

    // 已完成5次刷新，停止任务
    if (refreshCount >= 5) {
      localStorage.removeItem('refreshCount');
      return;
    }

    // 设置每分钟刷新的定时器
    const interval = setInterval(() => {
      const newCount = refreshCount + 1;
      // 先把新计数存入localStorage，避免页面刷新后丢失
      localStorage.setItem('refreshCount', newCount.toString());
      setRefreshCount(newCount);
      // 执行页面刷新
      window.location.reload();
    }, 60000);

    setRefreshTimer(interval);

    // 5分钟后强制停止（双重保险，防止计数异常）
    const stopTimeout = setTimeout(() => {
      clearInterval(interval);
      setRefreshTimer(null);
      localStorage.removeItem('refreshCount');
    }, 300000);

    // 组件卸载或路由变化时，清理定时器和超时任务
    return () => {
      clearInterval(interval);
      clearTimeout(stopTimeout);
    };
  }, [location.pathname, refreshCount, refreshTimer]);

  return (
    <div>
      <h1>Auto Refresh Component</h1>
      {refreshCount < 5 ? (
        <p>剩余自动刷新次数：{5 - refreshCount}次</p>
      ) : (
        <p>自动刷新已停止</p>
      )}
    </div>
  );
};

export default RefreshComponent;

• localStorage持久化计数：页面刷新后，状态会从localStorage读取之前的刷新次数，不会重置为0，确保5次后停止刷新。
• 路由监听：通过useLocation实时监测当前路径，一旦切换到首页（/），立即清除定时器并重置本地存储的计数。
• 定时器生命周期管理：在组件卸载、路由切换、完成5次刷新或5分钟到期时，都会清理定时器，避免内存泄漏和无效任务。
• 先更新计数再刷新：在执行页面刷新前，先将新的计数存入localStorage，确保下次页面加载时能获取到正确的进度。

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