通过here进行演示。您需要向下滚动，然后单击标题中的链接。
我在src目录中有一个layout.tsx文件，在(public)目录中有另一个layout.tsx文件，其中包括一个粘性<Header />组件。预期的行为是，在使用<Link>更改路由时，页面滚动到顶部。
实际发生的情况是页面滚动到顶部减去Header高度。我试着把scrollRestoration: true包含在next.config.js中，但没有成功。这个问题也出现在最新的金丝雀版本中。
另一件不断发生的事情是，当我多次刷新页面时，我会得到一个Hydration error。我不确定这两个问题是否相关。
我想知道我的布局结构是否无效，或者我在GitHub上打开问题之前是否错误地使用了新的布局功能。
如果有人能帮我弄清楚到底发生了什么，我会很感激的，因为这让我发疯了。
├──(public)
│ ├── page.tsx
│ └── layout.tsx
└── layout.tsx (root layout)// src/layout.tsx
import "assets/styles/globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head />
<body>{children}</body>
</html>
);
}// src/(public)/header.tsx
import Link from "next/link";
const Header = () => {
return (
<div className="bg-gray-200 h-12 sticky top-0 z-50">
<div className="flex flex-row mx-auto max-w-7xl h-full space-x-4 items-center ">
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</div>
</div>
);
};
export default Header;// src/(public)/layout.tsx
import Header from "./header";
export default function PublicLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Header />
<main className="py-16">{children}</main>
</>
);
}
// I've tried <main className="py-16"><Header />{children}</main> but the issue persisted
3条答案
按热度按时间z6psavjg1#
我检查了下一个最新版本，这个问题是固定的。
将下一个软件包从13.1.1更新为13.4.3。
7vux5j2d2#
在布局页面中尝试这样做
neekobn83#
我有一个解决方案，我们需要添加
在
layout.tsx上，因此在每次通过路由重新呈现时，都会调用谢谢