我正在使用AWS amplify UI react在react应用程序中创建身份验证流。我按照文档的说明，使用下面的文档创建了导航流。
https://ui.docs.amplify.aws/react/guides/auth-protected。
然而，登录后，我可以看到登录页面 Flink 每次当我访问任何其他路线。为了解决这个问题，我按照下面的问题的答案之一。
是的。
不幸的是，现在页面总是停留在“配置”状态，而且authStatus从来没有得到任何更改。我如何处理这种情况，以自动重定向到登录页面，如果没有验证，并不显示登录页面，每次用户刷新页面？
注：此问题与amplify-ui对身份验证器.提供程序组件的React有关。

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>
                        }
                    />