英文:
Tab freezes when using browser forward button for page accessed via Link
问题
我有一个极简的Next.JS应用程序，包括两个页面：主页和仪表板页面。所有页面顶部都有一个导航栏，其中包含一个链接对象，链接到仪表板页面。当我点击链接并到达仪表板页面后，我按下浏览器的返回按钮。这部分正常工作（我回到了主页）。然后我按下浏览器的前进按钮，打算转到仪表板页面。这时浏览器卡住了。
我在仪表板页面内添加了一个console.log语句，它在控制台中无限出现，暗示页面无休止地重新加载。
为什么会这样？我还注意到，如果我手动输入localhost:3000/dashboard而不是点击Link对象，问题就不会出现。
有什么想法吗？以下是相关的代码：
/* 主页：app/page.js */
import React from 'react';
export default function LandingPage() {
return <div>LandingPage</div>;
};
/* 仪表板：app/dashboard/page.js */
"use client";
export default async function Dashboard() {
// 这个在控制台中无限打印
console.log("Dashboard");
return <div>Dashboard</div>;
}
/* 导航栏：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="#">
<a className="text-xl font-bold text-gray-900">MySite</a>
</Link>
<div>
{/* 这是我点击的链接 */}
<Link href="/dashboard" className="text-gray-600 hover:text-gray-900 px-5">Dashboard</Link>
</div>
</nav>
);
}
/* 根布局：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正确指出的那样，从Dashboard函数中删除async确实解决了问题。然而，在我的实际代码中，我调用了一个异步函数（我在这里删除了它以简化示例）。
英文:
I have a minimal Next.JS app with two pages: a home page and a dashboard page. I have an nav bar at the top of all pages with a Link object that links to the dashboard page. When I click the Link and arrive at the dashboard page, I press the browser back button. This works (I arrive at the home page). Then I press the browser forward button, intending to go to the dashboard page. Here the browser freezes.
I added a console.log statement inside the dashboard, and it appears infinitely in the console, implying the page is reloaded endlessly.
Why is this the case? I also noticed that if I manually type in localhost:3000/dashboard instead of clicking the Link object, the problem does not appear.
Any ideas of why this is? Here is the relevant code:
/* 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>
);
}
I am using Next.js v13.4.1.
Thanks in advance.
EDIT: Removing the async from the Dashboard function, as @TheKritsakon correctly notes, does solve the issue. However, in my actual code, I make a call to an asynchronous function (I removed it to simplify the example here)
答案1
得分: 1
As i've made a simple research it appears that babel has some issue to reference the component name that are exported as async
https://github.com/babel/babel/issues/3786.
There's some specific reason why you exported the component as async ?
英文:
As i've made a simple research it appears that babel has some issue to reference the component name that are exported as async
https://github.com/babel/babel/issues/3786.
There's some specific reason why you exported the component as async ?
"use client";
export default function Dashboard()
{
// This gets printed infinitely in the console
console.log("Dashboard");
return <div>Dashboard</div>;
}
答案2
得分: 1
我查看了你的代码，你的方法看起来是正确的。
我还查看了文档页面和布局。
这似乎是nextjs中的一个错误。
我可以提供一个简单的临时解决方法。
在你的app/components/AppBar.js文件中。
将
<Link href="/dashboard" className="text-gray-600 hover:text-gray-900 px-5">Dashboard</Link>
替换为
<a href="/dashboard" className="text-gray-600 hover:text-gray-900 px-5">Dashboard</a>
请注意，以高速前进和后退可能会再次引发此问题。因此，建议向nextjs报告此问题。
或者，作为替代方法，从你的仪表板页面中删除async，并创建一个单独的async函数，然后从你的仪表板函数中调用它。类似于
/* DASHBOARD: app/dashboard/page.js */
"使用客户端";
async function DashboardHelper() {
return "示例";
}
export default function Dashboard() {
console.log("已调用");
DashboardHelper().then((res) => {
console.log(res)
}).catch(console.log);
return <div>仪表板</div>;
}
在上述解决方法中，以高速前进和后退不会引发任何问题。
希望对你有所帮助。
谢谢 
英文:
I went through your code and your approach seems to be correct.<br>
I also went through the docs Pages and Layout.<br>
It seems like a bug in nextjs.
I can just suggest a simple temporary workaround for this.<br>
In your app/components/AppBar.js file.
Replace
<Link href="/dashboard" className="text-gray-600 hover:text-gray-900 px-5">Dashboard</Link>
with
<a href="/dashboard" className="text-gray-600 hover:text-gray-900 px-5">Dashboard</a>
Please note that navigating forward and backward with high speed
may cause this issue again. Hence filing an issue with nextjs is suggested.
Or,alternatively,remove async from your dashboard page and create a separate async function and call it from your dashboard function. Something like
/* DASHBOARD: app/dashboard/page.js */
"use client";
async function DashboardHelper() {
return "example";
}
export default function Dashboard() {
console.log("called");
DashboardHelper().then((res) => {
console.log(res)
}).catch(console.log);
return <div>Dashboard</div>;
}
Navigating forward and backward with high speed won't cause any issues in the above workaround.
Hope it is helpful.
Thanks
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论