react nextjs 浏览器后退按钮冻结应用程序

问题描述 投票：0回答：1

我的 React nextjs 应用程序遇到问题。

当我访问特定网址并按浏览器背面时，应用程序完全冻结并且根本无法运行。 我看到有人有类似的问题here并且我没有使用异步函数的客户端组件定义 page.tsx 。我检查了所有文件。不过，我在下面有这个文件。

在我的应用程序中，我的应用程序文件夹内有layout.tsx 文件，其中包含以下内容：

"use client";
// imports

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [pca, setPca] = useState<PublicClientApplication | null>(null);

  useEffect(() => {
    const init = async () => {
      const msalInstance = new PublicClientApplication(msalConfig);
      await msalInstance.initialize();
      setPca(msalInstance);
    };

    init();
  }, []);

  if (!pca)
    return (
      <html>
        <head></head>
        <body></body>
      </html>
    );

  return (
    <html>
      <head></head>
      <body>
        <ThemeProvider>
          <CssBaseline />
          <MsalProvider instance={pca}>
            <MyAppContainer content={children} />
          </MsalProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

如何解决这个问题？注意我正在使用，下一个版本：14.2

reactjs next.js
1个回答
0
投票

我不能 100% 确定这会导致您的问题，但请从根布局中删除 

use client
指令。我想我记得读过这甚至是不允许的，但无论哪种方式，这都是一种可怕的做法，并且不需要完成您在这里想要完成的事情。尝试这样的事情：

// Note the 'async'
const RootLayout = async ({
  children,
}: {
  children: React.ReactNode;
}) => {
      const pca = new PublicClientApplication(msalConfig);
      await pca.initialize();

... rest of your code


export default RootLayout // You can stick with a direct export of the async function. This arrow function is just personal preference.
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.