React Router：如何区分页面首次加载与刷新并控制跳转？

核心思路 #

利用sessionStorage的特性：首次打开页面时sessionStorage为空，刷新页面时sessionStorage会保留之前存储的数据。我们可以在首次重定向完成后标记一个状态，后续刷新时读取这个状态来跳过强制重定向逻辑。

修改后的代码实现 #

const onAppLoad = useCallback(async () => {
  // 检查是否已经完成过首次重定向
  const hasCompletedInitialRedirect = sessionStorage.getItem('hasInitialRedirect');

  if (!hasCompletedInitialRedirect) {
    Auth.currentSession()
      .then(response => {
        authRef.current = response;
        setUser(response.idToken.payload);
        navigate('/employees');
        setIsAuthenticated(true);
        // 标记首次重定向已完成
        sessionStorage.setItem('hasInitialRedirect', 'true');
      })
      .catch(() => {
        navigate('/login');
        // 标记首次重定向已完成（不管成功失败都标记，避免重复触发）
        sessionStorage.setItem('hasInitialRedirect', 'true');
      })
      .finally(() => {
        setFetching(false);
      });
  } else {
    // 刷新页面时，仅验证会话状态但不强制重定向
    Auth.currentSession()
      .then(response => {
        authRef.current = response;
        setUser(response.idToken.payload);
        setIsAuthenticated(true);
      })
      .catch(() => {
        setIsAuthenticated(false);
        // 这里可根据业务需求决定：刷新后会话失效时是否重定向到登录页
        // navigate('/login');
      })
      .finally(() => {
        setFetching(false);
      });
  }
}, []);

补充说明 #

• sessionStorage是页面会话级别的存储，关闭浏览器标签后数据会被清除，下次重新打开页面会被视为"首次进入"，完全匹配需求场景。
• 如果需要跨标签页保持状态，可以改用localStorage，但注意用户手动清除浏览器存储会导致状态重置。
• 刷新页面时的会话失效处理可按需调整，代码中注释了重定向逻辑，可根据业务需求开启或关闭。

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