您好，我正在尝试在网站需要时间加载时显示加载页面。因为它是一个相当大的网站，我认为加载屏幕会提供最好的用户体验，但是我似乎无法弄清楚如何让它在 nextjs 13 上工作。我创建了一个简单的功能组件，上面写着加载...并且有将其直接导入到我的layout.jsx文件夹中。
我正在使用应用程序目录方法，这是相当新的，而且我在 nextjs 也是新的，所以我有点迷失^^
我想我可能需要在某个时候设置状态，但我似乎无法弄清楚何时何地进行设置
任何建议都会很棒。
thanks
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";
import Loading from "../components/loading/loading";
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<Suspense fallback={<Loading />}>{children}</Suspense>
</body>
</html>
);
}
加载页面.js
const LoadingPage = () => {
return (
<div className="loading w-screen h-screen bg-red-100">
<p>Loading...</p>
</div>
);
};
export default LoadingPage;
加载.js
import LoadingPage from "@/components/loading/loading";
export default function Loading() {
return <LoadingPage />;
}
