我有一个最小的Next.JS应用程序，只有两个页面：主页和 Jmeter 板页面。我在所有页面的顶部都有一个导航栏，其中有一个链接对象链接到 Jmeter 板页面。当我单击链接并到达 Jmeter 板页面时，我按下浏览器的后退按钮。这工作（我到达主页）。然后我按下浏览器前进按钮，打算转到 Jmeter 板页面。此时浏览器冻结。
我在 Jmeter 板中添加了一个console.log语句，它在控制台中无限地出现，这意味着页面被无休止地重新加载。
为什么会这样呢？我还注意到，如果我手动键入localhost:3000/dashboard而不是单击Link对象，问题不会出现。
知道为什么吗？下面是相关代码：
/* HOMEPAGE: app/page.js */
import React from 'react';
export default function LandingPage()
{
return <div>LandingPage</div>;
};
/* DASHBOARD: app/dashboard/page.js */
"use client";
export default async function Dashboard()
{
// This gets printed infinitely in the console
console.log("Dashboard");
return <div>Dashboard</div>;
}
/* APPBAR: app/components/AppBar.js */
"use client";
import Link from 'next/link';
export default function AppBar({})
{
return (
<nav className="mb-0 px-5 py-5 my-0 ttext-gray-800 text-center dark: bg-white flex justify-between items-left shadow-[#ccc] shadow-md z-50 relative">
<Link href="#" className="text-xl font-bold text-gray-900">MySite</Link>
<div>
{/* This is the link I am clicking */}
<Link href="/dashboard" className="text-gray-600 hover:text-gray-900 px-5">Dashboard</Link>
</div>
</nav>
);
}
/* ROOT LAYOUT: app/layout.js */
import './globals.css'
import AppBar from './components/AppBar';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<AppBar />
<main className="max-w mx-auto">
{children}
</main>
</body>
</html>
);
}我使用的是Next.js v13.4.1。
先谢谢你了。
编辑：从 Jmeter 板功能中删除async，正如@TheKritsakon正确指出的那样，确实解决了这个问题。然而，在我的实际代码中，我对一个异步函数进行了调用（为了简化这里的示例，我将其删除了）
2条答案
按热度按时间oyt4ldly1#
我做了一个简单的研究，似乎babel在引用导出为asynchttps://github.com/babel/babel/issues/3786的组件名称时遇到了一些问题。
有一些特定的原因为什么你导出组件为异步？
mnowg1ta2#
我检查了你的代码，你的方法似乎是正确的。
我也看了Pages and Layout的文档。
这似乎是nextjs中的bug。
我只能建议一个简单的临时解决方案。
在app/components/AppBar.js文件中。
更换
与
请注意，高速向前和向后导航可能会再次导致此问题。因此建议向nextjs提交问题。
或者，从 Jmeter 板页面中删除async，并创建一个单独的async函数，然后从 Jmeter 板函数中调用它。就像
高速向前和向后导航不会导致上述解决方案中的任何问题。
希望对大家有帮助。Thanks：）