next.js 在下一个js 13.4.5中无法加载.jsx

iswrvxsc 于 2023-06-22 发布在其他

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

在下一个js 13.4.5中无法加载组件
layout.jsx

"use client";
import React, { Suspense } from "react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Loading from "./loading";

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
});

export default function RootLayout({ children }) {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <html lang="en">
        <title>auth</title>
        <body>
          <header></header>
          <Suspense fallback={<Loading />}>
            <main>{children}</main>
          </Suspense>
          <footer></footer>
        </body>
      </html>
    </ThemeProvider>
  );
}

loading.jsx

"use client";
import React from "react";
import CircularProgress from "@mui/material/CircularProgress";

function Loading() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <CircularProgress />
    </div>
  );
}

export default Loading;

我试着问chatGPT，但它没有给予我一个明确的答案
我想让页面加载，而不是CSS样式尚未连接的页面

next.js

来源：https://stackoverflow.com/questions/76453254/doesnt-work-loading-jsx-in-next-js-13-4-5