我有一个react应用程序，我使用https://www.npmjs.com/package/react-oauth2-code-pkce包将用户重定向到外部登录/身份验证站点。
但是，在未登录或首次尝试导航到http：//localhost：3000/时首次加载应用程序时，应用程序不会自动重定向到登录页面或进行必要的API调用，而是加载一个没有任何内容的空白屏幕，因为此时未设置令牌。
但是我得到了这个控制台错误：
x1c 0d1x的数据
然后我发现，如果我刷新页面，就会发生重定向调用，并将我带到指定的登录页面。

的
我已经尝试了其他几个软件包，但似乎不能让他们工作。任何帮助，这将是非常有帮助的。
我已经遵循了上面的包所设置的示例，目前我的代码如下：我发现的唯一可行的解决方法是添加useEffect来检查令牌是否已经存在，并重新加载以触发重定向请求，但这似乎不是最佳的。

import "./i18n/config";
import { appTheme } from "./_Themes/theme";
import { AuthContext, AuthProvider, IAuthContext, TAuthConfig, TRefreshTokenExpiredEvent } from "react-oauth2-code-pkce";
import { Route, Routes } from "react-router-dom";
import { ThemeProvider } from "@mui/material";
import { useContext, useEffect } from "react";

function App() {
    const { token, tokenData } = useContext<IAuthContext>(AuthContext);
    const authConfig: TAuthConfig = {
        clientId: "test_client",
        authorizationEndpoint: "https://localhost:49178/connect/authorize",
        tokenEndpoint: "https://localhost:49178/connect/token",
        redirectUri: "https://localhost:3000",
        scope: "x",

        onRefreshTokenExpire: (event: TRefreshTokenExpiredEvent) => window.confirm("Session expired. Refresh page to continue using the site?") && event.login()
    };

    useEffect(() => {
        // Check if the token exists
        if (!token) {
            // Token doesn't exist, reload the window to initiate the login flow
            window.location.reload();
        }
    }, [token]);

    return (
        <AuthProvider authConfig={authConfig}>
            {token && (
                <ThemeProvider theme={appTheme}>
                    <Routes>
                        <Route path="/" element={<Dashboard />} />
                    </Routes>
                </ThemeProvider>
            )}
        </AuthProvider>
    );
}

export default App;

字符串