我在Next.js 13中有这个应用程序,我根据一些变量显示不同的页面,但每次它都会一页一页地显示,直到我找到正确的页面。在应用程序知道要显示哪个页面之前,您可以通过加载屏幕来避免这种情况吗?
我的代码:
import { useRouter } from "next/navigation"
import Login from "../../components/auth/Login"
import Particle from "../../components/Particle"
import Plans from "../../components/stripe/Plans"
import { useUserContext } from "./../context/userContext"
import { ArrowLeft } from "phosphor-react"
function HomePage() {
const router = useRouter()
const { user, premiumStatus, unlock, logoutUser } = useUserContext()
return (
<>
{!user ? (
<Login />
) : (
<div>
{!premiumStatus ? (
<div className="flex h-screen justify-center" >
<Particle/>
<button onClick={logoutUser} title="Logout" className="fixed top-0 left-0 text-white p-4" ><ArrowLeft className="w-10 h-10" /></button>
{unlock && <Plans/>}
</div>
) : (
router.replace("../dashboard")
)}
</div>
)}
</>
)
}
1条答案
按热度按时间nbysray51#
假设您正在从服务器请求用户数据,这需要一些时间。您需要一种机制来让您的组件知道何时发生这种情况。上下文中的一个简单的状态变量可以用于此。
在上下文中
为了更好地组织这一点,我建议使用保护子句,而不是巨大的链式条件: