next.js 如何防止在加载用户数据时显示不同的页面？

bogh5gae 于 2023-04-05 发布在其他

关注(0)|答案(1)|浏览(161)

我在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>
            )}
        </>
    )
}

next.js

来源：https://stackoverflow.com/questions/75894643/how-do-i-prevent-different-pages-from-showing-while-loading-user-data

1条答案

按热度按时间

nbysray51#

假设您正在从服务器请求用户数据，这需要一些时间。您需要一种机制来让您的组件知道何时发生这种情况。上下文中的一个简单的状态变量可以用于此。
在上下文中

const [loading, setLoading] = useState(false);

fetchUserData(){
  try {
    setLoading(true);
    ...
  } catch(...) {
    ...
  } finally {
    setLoading(false);
  }
}

为了更好地组织这一点，我建议使用保护子句，而不是巨大的链式条件：

function HomePage() {
  const router = useRouter();

  // Add the loading state
  const { user, loading, premiumStatus, unlock, logoutUser } = useUserContext(); 
  
  // Make a loading component, something fun to look at
  if (loading) return <Loading/>; 

  if (!user) return <Login/>;

  // I would probably make this its own component.
  if (!premiumStatus)
    return (
      <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>
    );
  
  // All checks pass, reroute to dashboard.
  router.replace("../dashboard");
  return null;
}

赞(0）回复(0）举报 2023-04-05

我来回答

next.js 如何防止在加载用户数据时显示不同的页面？

1条答案

相关问题

热门标签

最新问答