小编Hof*_*ann的帖子

具有嵌套布局的 Next.js 13 beta 应用程序目录在使用 next/link 进行路由更改时不会滚动到顶部

演示在这里。您需要向下滚动,然后单击标题中的链接。

\n

我的目录中有一个layout.tsx文件src,目录layout.tsx中有另一个文件(public),其中包含粘性<Header />组件。预期的行为是页面在路线更改时使用 .滚动到顶部<Link>

\n

实际发生的情况是页面滚动到顶部减去高度Header。我试图加入scrollRestoration: truenext.config.js没有成功。最新的金丝雀版本中也存在该问题。

\n

另一件不断发生的事情是,我Hydration error在多次刷新页面时遇到了问题。我不确定这两个问题是否相关。

\n

在 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
Run 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}\n
Run 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)

reactjs next.js tailwind-css

5
推荐指数
1
解决办法
1151
查看次数

标签 统计

next.js ×1

reactjs ×1

tailwind-css ×1