如何平滑滚动到一个锚标记从另一个页面在NextJS?

Question

我在我的NextJS中有2个页面(1是主页，另一个是排行榜页面)。我有一个navbar:

<div className={styles.navItem}>
<Link href="/">
<a className={styles.navLinks} onClick={toggle}>
Home
</a>
</Link>
</div>
<div className={styles.navItem} onClick={toggle}>
<Link href="/">
<a
className={styles.navLinks}
onClick={setTimeout((e) => {
document.getElementById("about") &&
document
.getElementById("about")
.scrollIntoView({ behavior: "smooth", block: "end" });
}, 2000)}
>
About Us
</a>
</Link>
</div>
<div className={styles.navItem} onClick={toggle}>
<Link href="/">
<a
className={styles.navLinks}
onClick={setTimeout((e) => {
document.getElementById("program") &&
document
.getElementById("program")
.scrollIntoView({ behavior: "smooth", block: "end" });
}, 2000)}
>
Program Overview
</a>
</Link>
</div>
<div className={styles.navItem}>
<Link href="/leaderboard/">
<a className={styles.navLinks} onClick={toggle}>
Leaderboard
</a>
</Link>
</div>

我想也许通过使用setTimeout延迟它会，重定向我首先到主页(当我点击Link标签)，然后，2秒后，它会平滑滚动我到我想去的部分。但是这会产生一个错误document is not defined，当我重新加载页面时，即使没有单击标记，页面也会在2秒后平滑滚动到#program。我做错了什么?

ERROR (ON TERMINAL)

error - components/main/Nav/MenuRight.js (18:23) @ Timeout.eval [as _onTimeout]
ReferenceError: document is not defined
16 |         <Link href="/">
17 |           <a
> 18 |             className={styles.navLinks}
|                       ^
19 |             onClick={() =>
20 |               setTimeout((e) => {
21 |                 document.getElementById("about") &&

Answer 1

你的问题是你直接调用setTimeout，这是立即在服务器上执行(更具体地说，NextJS在服务器端没有window和document对象)，这就是为什么document不可用。

你应该把它包装成下面这样的函数，onClick只会在你点击那个元素时触发

<div className={styles.navItem}>
<Link href="/">
<a className={styles.navLinks} onClick={toggle}>
Home
</a>
</Link>
</div>
<div className={styles.navItem} onClick={toggle}>
<Link href="/">
<a
className={styles.navLinks}
onClick={(e) => {
setTimeout(() => {
document.getElementById("about") &&
document
.getElementById("about")
.scrollIntoView({ behavior: "smooth", block: "end" 
});
}, 2000)
}}
>
About Us
</a>
</Link>
</div>
<div className={styles.navItem} onClick={toggle}>
<Link href="/">
<a
className={styles.navLinks}
onClick={(e) => {
setTimeout(() => {
document.getElementById("program") &&
document
.getElementById("program")
.scrollIntoView({ behavior: "smooth", block: "end" });
}, 2000)
}}
>
Program Overview
</a>
</Link>
</div>
<div className={styles.navItem}>
<Link href="/leaderboard/">
<a className={styles.navLinks} onClick={toggle}>
Leaderboard
</a>
</Link>
</div>