React Router登录后无法从首页/重定向到/dashboard及无限循环问题求解

首先排查现有代码核心问题 #

1. 无限循环根因 #

你写的onAuthUIStateChange监听的useEffect没有加依赖数组，每次组件渲染都会重新注册监听、触发状态更新，陷入无限渲染循环。同时还有两个useEffect的判断逻辑和依赖配置错误：

• 登录判断条件写错，if (AuthState.SignedIn && user)永远为真，因为AuthState.SignedIn是枚举真值，没有和当前authState对比
• 登出逻辑的useEffect依赖是user，但判断条件用的是authState，依赖和逻辑不匹配

2. 首页重定向不生效根因 #

你首页重定向判断依赖的userName状态，赋值代码被注释，也没有调用isAuth方法做状态初始化，userName永远为undefined，自然不会触发重定向。

修复步骤 #

第一步：修复无限循环问题 #

调整useEffect的依赖和逻辑：

// 仅在组件挂载时注册一次auth状态监听
useEffect(() => {
  return onAuthUIStateChange((nextAuthState, authData) => {
    setAuthState(nextAuthState);
    setUser(authData);
  });
}, []); // 空依赖数组，只执行一次

// 登录状态同步到redux，同时赋值userName
useEffect(() => {
  if (authState === AuthState.SignedIn && user) {
    dispatch(userLogIn(user.attributes.email));
    setUserName(user.username);
  }
}, [authState, user, dispatch]);

// 登出状态同步到redux
useEffect(() => {
  if (authState === AuthState.SignedOut) {
    dispatch(userLogOut());
    setUserName(undefined);
  }
}, [authState, dispatch]);

第二步：修复页面刷新后登录状态丢失问题 #

增加初始化逻辑，页面刷新时主动拉取当前登录状态：

// 页面加载时初始化登录状态
useEffect(() => {
  const initAuthStatus = async () => {
    try {
      const currentUser = await Auth.currentAuthenticatedUser();
      setAuthState(AuthState.SignedIn);
      setUser(currentUser);
      setUserName(currentUser.username);
      dispatch(userLogIn(currentUser.attributes.email));
    } catch (err) {
      // 未登录清空状态
      setAuthState(AuthState.SignedOut);
      setUser(undefined);
      setUserName(undefined);
      dispatch(userLogOut());
    }
  }
  initAuthStatus();
}, [dispatch]);

第三步：优化首页路由判断 #

可以直接用authState和user做判断，不需要额外依赖userName：

<Route exact path="/">
  {authState === AuthState.SignedIn && user ? <Redirect to="/dashboard" /> : <Home />}
</Route>

额外注意点 #

检查ProtectedRoute导入名称和实际文件名是否一致，你提供的组件文件名为ProtectedRoutes.js，导入时写的是import ProtectedRoute from "./Utils/ProtectedRoute"，名称不匹配会导致路由守卫失效。

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