Oma*_*mar 3 javascript state loading reactjs next.js
您好，我正在尝试在网站需要时间加载时显示加载页面。因为它是一个相当大的网站，我认为加载屏幕会提供最好的用户体验，但是我似乎无法弄清楚如何让它在 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";
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 />;
}
小智 6
在 NextJS 13 中，实际上有一种默认方法来处理页面内的加载状态。loading.tsx您可以在目录中声明一个文件/app，其内容如下：
export default function Loading() {
return <Loading />
}
然后，在您的 中Layout，您可以使用标签包裹页面Suspense，如下所示：
<Layout>
<Navbar>
...
<Suspense fallback={<Loading/>}>
<Page/>
</Suspense>
</Layout>
您的loading状态将在导航时自动处理。
| 归档时间： |
|
| 查看次数： |
3880 次 |
| 最近记录： |