我有一个最小的 Next.JS 应用程序，有两个页面:主页和仪表板页面。我在所有页面的顶部都有一个导航栏，其中有一个链接到仪表板页面的链接对象。当我单击链接并到达仪表板页面时，我按浏览器后退按钮。这有效(我到达主页)。然后我按下浏览器前进按钮，打算转到仪表板页面。这里浏览器卡住了。
我在仪表板内添加了一条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。
提前致谢。
编辑:正如 @TheKritsakon 正确指出的那样，从仪表板功能中删除 async 确实解决了问题。但是，在我的实际代码中，我调用了一个异步函数(我删除了它以简化此处的示例)
最佳答案
我做了一个简单的研究，发现 babel 在引用导出为 async 的组件名称时遇到了一些问题 https://github.com/babel/babel/issues/3786 .
将组件导出为异步有一些具体原因吗？
"use client";
export default function Dashboard()
{
// This gets printed infinitely in the console
console.log("Dashboard");
return <div>Dashboard</div>;
}
关于next.js - 使用浏览器前进按钮访问通过链接访问的页面时，选项卡卡住，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76402871/