Hof*_*ann 5 reactjs next.js tailwind-css
演示在这里。您需要向下滚动，然后单击标题中的链接。
\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)\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}\n// src/(public)/header.tsx\n\nimport Link from "next/link";\n\nconst Header = () => {\n return (\n <div className="bg-gray-200 h-12 sticky top-0 z-50">\n <div className="flex flex-row mx-auto max-w-7xl h-full space-x-4 items-center ">\n <Link href="/">Home</Link>\n <Link href="/about">About</Link>\n <Link href="/contact">Contact</Link>\n </div>\n </div>\n );\n};\n\nexport default Header;\n// src/(public)/layout.tsx\n\nimport Header from "./header";\n\nexport default function PublicLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n <>\n <Header />\n <main className="py-16">{children}</main>\n </>\n );\n}\n\n// I\'ve tried <main className="py-16"><Header />{children}</main> but the issue persisted\n小智 -1
我有一个解决方案，我们需要添加
\nuseEffect(() => { // \xef\xb8\x8f scroll to top on page load\n window.scrollTo({top: 0, left: 0, behavior: 'smooth'});\n}, []);\n在layout.tsx在每次按路线重新渲染时都会调用它
谢谢
\n| 归档时间： |
|
| 查看次数： |
1151 次 |
| 最近记录： |