使用 amplify ui React 配置状态时，AuthStatus 不会发生变化

Question

我正在使用 AWS amplify UI React 在 React 应用程序中创建身份验证流程。我按照该文档并使用下面的文档制作了导航流程。

https://ui.docs.amplify.aws/react/guides/auth-protected。

然而，登录后，每次访问任何其他路由时，我都能看到登录页面闪烁。为了解决这个问题，我遵循了以下问题的答案之一。

身份验证 - useAuthenticator - React - Amplify Auth 上的登录页面闪烁。

不幸的是，现在页面始终停留在“配置”状态，并且authStatus根本没有改变。如何处理这种情况，以便在未经身份验证的情况下自动重定向到登录页面，并且在用户每次刷新页面时不显示登录页面？

注意：这个问题与amplify-ui与Authenticator.provider组件的反应有关。

RequireAuth.tsx - all routes are wrapped inside this
import { useLocation, Navigate } from "react-router-dom";
import { useAuthenticator } from "@aws-amplify/ui-react";
import PageLoader from "../../components/loader/page-loader";

export function RequireAuth({ children }: any) {
    const location = useLocation();
    const { authStatus, user } = useAuthenticator((context) => [
        context.authStatus,
    ]);
    console.log("authStatus:::", authStatus);
    console.log("user:::", user);

    if (authStatus === "authenticated") {
        return <>{children}</>;
    } else if (authStatus === "unauthenticated") {
        return <Navigate to="/login" state={{ from: location }} replace />;
    } else if (authStatus === "configuring") {
        return <PageLoader />;
    } else {
        return <Navigate to="/login" state={{ from: location }} replace />;
    }
}

appRoutes 中的路由很少。

                <Route
                    path="/"
                    element={
                        <RequireAuth>
                            <AppLayout />
                        </RequireAuth>
                    }>
                    <Route
                        index
                        element={
                            <RequireAuth>
                                <Home />
                            </RequireAuth>
                        }
                    />

Answer 1

不幸的是，这似乎是和的一个已知错误。<Authenticator.Provider><Authenticator/>

在错误修复之前，有一个已知的解决方法，即始终将<Authenticator/>组件包含在活动 dom 结构中，然后使用 CSS 隐藏它。这非常糟糕，但是对我有用：

[data-amplify-authenticator] {
    display:none;
}

将来，我计划编写一个自定义 UI 并在后端处理身份验证，然后再完全删除这些组件。