小编Oma*_*mar的帖子

您好，我正在尝试在网站需要时间加载时显示加载页面。因为它是一个相当大的网站，我认为加载屏幕会提供最好的用户体验，但是我似乎无法弄清楚如何让它在 nextjs 13 上工作。我创建了一个简单的功能组件，上面写着加载...并且有将其直接导入到我的layout.jsx文件夹中。

我正在使用应用程序目录方法，这是相当新的，我在 nextjs 也是新的，所以我有点迷失 ^^

我想我可能需要在某个时候设置状态，但我似乎无法弄清楚何时何地进行设置

任何建议都会很棒。

谢谢

import "./globals.css";
import React, { useState, useEffect } from "react";
import Loading from "../components/loading/loading";

const Layout = ({ children, dataLoaded }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (dataLoaded) {
      setLoading(false);
    }
  }, [dataLoaded]);

  return (
    <body className="app {oswald.className}">
      {loading && <Loading />}
      {children}
    </body>
  );
};

export default Layout;

。。。

尝试 1 -

按照下面的答案之一后，我的加载页面似乎根本没有显示。并且没有出现错误。

我的布局如下

布局.jsx

import "./globals.css";
import { Suspense } from "react"; …