演示在这里。您需要向下滚动,然后单击标题中的链接。
\n我的目录中有一个layout.tsx文件src,目录layout.tsx中有另一个文件(public),其中包含粘性<Header />组件。预期的行为是页面在路线更改时使用 .滚动到顶部<Link>。
实际发生的情况是页面滚动到顶部减去高度Header。我试图加入scrollRestoration: true但next.config.js没有成功。最新的金丝雀版本中也存在该问题。
另一件不断发生的事情是,我Hydration error在多次刷新页面时遇到了问题。我不确定这两个问题是否相关。
在 GitHub 上提出问题之前,我想知道我的布局结构是否无效,或者我是否错误地使用了新的布局功能。
\n如果有人能帮助弄清楚发生了什么,我将不胜感激,因为它一直让我发疯。
\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80(public)\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 page.tsx\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 layout.tsx\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 layout.tsx (root layout)\nRun Code Online (Sandbox Code Playgroud)\n// src/layout.tsx\n\nimport "assets/styles/globals.css";\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html>\n <head />\n <body>{children}</body>\n </html>\n );\n}\nRun Code Online (Sandbox Code Playgroud)\n// src/(public)/header.tsx\n\nimport Link from "next/link";\n\nconst Header = () => {\n return …Run Code Online (Sandbox Code Playgroud)