Next.js 13 在路由到下一页时保持滚动位置

Question

我有一个关于 Next.js 13 路由的问题。当我想从一个页面转到另一个页面并且新页面正在获取数据时，Next.js 13 会保留上一页的滚动位置。但如果一开始没有取数据，那么新页面的滚动位置就在顶部，就应该是这样。我不知道为什么会出现这种情况，我也不知道如何解决这个问题。也许你们中的一些人也有同样的问题。

您可以在我的网站上测试此行为。请注意，到目前为止，我只为手机设计它，因此它在桌面上看起来很糟糕，但它应该可以帮助您理解我的意思： https://csgo-kapsel.vercel.app/

以下是我的代码的一些部分：

用于转到下一页的组件：

"use client"

import { useRouter } from "next/navigation";

function CapsuleCard({ title, icon, stickerValue, capsulePrice, hoverAnimation, detailPage }: Props) {
    const router = useRouter();

    return (
        <div className={styles.card} onClick={() => { detailPage ? router.push(detailPage) : null }}>
             //other code
        </div>
    )
}

export default CapsuleCard;

下一页：

type Props = {
  params: {
    id: string
  }
}

async function Page({ params: { id } }: Props) {
  //Scroll position maintains because of this fetch
  const capsuleData = await getCapsule(id);

  return (
    <>
      //some code
    </>
  )
}

export default Page

我还发现这个问题听起来与我的相关，我尝试了评论中的所有内容，但问题仍然存在。

我希望你能帮助我。

提前致谢。

兰花

Answer 1

我通过删除“async”关键字解决了这个问题，因此将此函数转换为反应功能组件。这样我就可以使用 useEffect 钩子并在那里提出我的请求。通过这样做，滚动位置不再保持。

这是我更新的代码（用于转到下一页的组件保持不变）：

"use client"

type Props = {
  params: {
    id: string
  }
}

function Page({ params: { id } }: Props) {
  const [capsuleData, setCapsuleData] = useState<CapsuleData>();
  const [fetchError, setFetchError] = useState<string>();

  useEffect(() => {
    const getCapsuleData = async () => {
      try {
        const capsuleData = await getCapsule(id);
        setCapsuleData(capsuleData);
      } catch (error: any) {
        setFetchError(error.message);
      }
    }

    getCapsuleData();
  }, []);

  return (
    <>
      //some code
    </>
  )
}

export default Page