React Amplify Auth：useAuthenticator认证时登录页闪烁问题

你的推测是对的，问题出在认证状态未完成解析时，组件直接触发了/login跳转。Amplify的useAuthenticator初始化时，authStatus会处于loading状态，此时你的代码因为不满足authenticated条件，会先渲染<Navigate>跳转到登录页，等认证Promise解析完成、确认用户已认证后，又会跳回目标页面，从而导致闪烁。

解决方案：添加加载状态处理 #

修改RequireAuth组件，针对authStatus的三种状态分别处理：

• loading：渲染加载组件（如Spinner）
• authenticated：渲染子组件
• unauthenticated：跳转到登录页

修改后的代码如下：

import { useLocation, Navigate } from 'react-router-dom';
import { useAuthenticator } from '@aws-amplify/ui-react';
// 引入你的加载组件，也可以使用Amplify内置的加载组件
import Spinner from './Spinner';

export function RequireAuth({ children }) {
  const location = useLocation();
  const { authStatus } = useAuthenticator(context => [context.authStatus]);
  
  // 认证状态未确定时，显示加载组件，阻止跳转
  if (authStatus === 'loading') {
    return <Spinner />;
  }

  return authStatus === 'authenticated' 
    ? children 
    : <Navigate to="/login" state={{ from: location }} replace />;
}

关键说明 #

• 新增对authStatus === 'loading'的判断，此时仅显示加载状态，避免不必要的页面跳转
• 若使用Amplify UI的内置组件，可直接用<Authenticator.LoadingScreen />替代自定义Spinner
• 加载组件只需做简单的视觉提示（比如旋转动画），无需复杂逻辑

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