React(Gatsby.js)中浏览器回退/页面间状态数据持久化解决方案咨询

看起来你遇到的核心问题是客户端路由下页面回退时，全局状态被清空导致重复请求API，结合你用Recoil做状态管理的场景，我给你几个实用的解决方案和最佳实践：

1. 重构Recoil状态为「用户维度的缓存」，不要卸载时清空数据 #

你现在在FollowerPage卸载时清理followers状态的操作，是导致回退无数据的直接原因——回退时组件重新挂载，状态已经被清掉，只能重新请求。

正确的做法是把全局状态设计成以userId为key的缓存对象，这样不同用户的粉丝数据可以共存，不用互相覆盖，也不需要在组件卸载时清空：

// 定义一个缓存式的Recoil Atom
const followersCacheState = atom({
  key: 'followersCache',
  default: {}, // 结构：{ [userId]: { data: [], loading: boolean } }
});

之后在FollowerPage里，根据当前userId从缓存中读取对应数据，而不是用单一的followers状态，这样切换用户后，旧用户的数据依然保存在缓存里，回退时直接复用即可。

2. 优化API请求逻辑：优先读取缓存，避免重复请求 #

原来的useEffect依赖是空数组，每次组件挂载都会触发请求。现在改成：当userId变化时，先检查缓存是否已有该用户的有效数据，只有缓存不存在或未加载完成时，才发起API请求：

const FollowerPage = () => {
  const { userId } = useParams();
  const followersCache = useRecoilValue(followersCacheState);
  const setFollowersCache = useSetRecoilState(followersCacheState);
  
  // 从缓存中获取当前用户的粉丝数据（默认初始状态为加载中）
  const currentCache = followersCache[userId] || { data: [], loading: true };

  useEffect(() => {
    // 如果缓存已有数据且加载完成，直接跳过请求
    if (currentCache.data.length > 0 && !currentCache.loading) return;

    const fetchFollowers = async () => {
      try {
        // 更新缓存的加载状态
        setFollowersCache(prev => ({
          ...prev,
          [userId]: { ...prev[userId], loading: true }
        }));
        // 发起API请求
        const res = await fetch(`/api/users/${userId}/followers`);
        const data = await res.json();
        // 更新缓存的最终数据
        setFollowersCache(prev => ({
          ...prev,
          [userId]: { data, loading: false }
        }));
      } catch (err) {
        console.error('获取粉丝列表失败:', err);
        setFollowersCache(prev => ({
          ...prev,
          [userId]: { ...prev[userId], loading: false }
        }));
      }
    };

    fetchFollowers();
  }, [userId, followersCache, setFollowersCache]);

  if (currentCache.loading) {
    return <div>loading....</div>;
  }

  return (
    <div>
      <div>Follower</div>
      <div>
        {currentCache.data.map(user => (
          <div key={user.id}>
            <div onClick={() => navigate(`/app/user/${user.id}`)}>
              {user.name}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

同样的逻辑也可以复制到UserPage，把用户信息也做成userId维度的缓存，彻底解决回退时重新加载的问题。

3. 滚动位置恢复的补充方案 #

浏览器默认会记住页面滚动位置，但在React单页应用中偶尔会失效，你可以通过路由状态配合window.scrollTo手动处理：

import { useLocation, useNavigate } from '@reach/router'; // Gatsby用的是@reach/router

const FollowerPage = () => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    // 回退时恢复之前的滚动位置
    if (location.state?.scrollPosition) {
      window.scrollTo(0, location.state.scrollPosition);
    }
    // 离开页面时保存当前滚动位置
    return () => {
      const scrollPosition = window.scrollY;
      // 回退时把滚动位置传递给上一页
      navigate(-1, { state: { scrollPosition } });
    };
  }, [location.state, navigate]);

  // ...其他代码
};

核心最佳实践总结 #

• 全局状态采用用户维度的缓存结构，避免单一状态被覆盖或清空
• 永远优先读取缓存，仅在缓存缺失时发起API请求
• 不要在组件卸载时清理全局缓存数据（除非用户退出登录这类场景）
• 滚动位置恢复可以通过路由状态或全局状态辅助实现

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