使用Auth0ContextProvider组件并从Auth0Context中获取isLoading状态。以下是示例代码:
import React, { useContext } from "react";
import { Auth0Context, Auth0ContextInterface, Auth0Provider } from "@auth0/auth0-react";
function MyApp() {
const { isLoading } = useContext(Auth0Context);
return (
<>
{isLoading ? Loading... : App loaded}
>
);
}
function Auth0Wrapper({ children }: { children: React.ReactNode }) {
const domain = process.env.REACT_APP_AUTH0_DOMAIN!;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID!;
return (
{children}
);
}
function App() {
return (
);
}
export default App;
在此示例中,我们使用Auth0Context
上下文并在Auth0ContextInterface
中传入泛型以确定我们想要使用isLoading状态。然后,我们从上下文中获取isLoading属性并在渲染App时使用它。
注意,在此示例中,我们使用了Auth0Provider
和Auth0Wrapper
。这些是不同的包装器,用于处理与Auth0 SDK的交互。您可以根据您的应用程序需要进行更改。