Next.js页面仅在移动端自动滚动至顶部问题求助

我正在开发首个Next.js项目，遇到一个异常：网页会自动滚动至顶部，且该问题仅出现在移动端。

原实现代码（使用useRef + forwardRef） #

父组件 #

const someRef = useRef<HTMLElement>(null);
return (
    <ChildComponent ref={someRef} />
)

子组件 #

const ChildComponent = React.forwardRef((_:unknown, ref: React.LegacyRef<HTMLElement>) => {
    return (
      <div ref={ref} id='someRef'>
          // ...
      </div>
    )
 }
)

修改后代码（移除所有Ref，改用普通函数组件） #

为排查问题，我已移除所有ref，将forwardRef替换为普通React函数组件：

父组件 #

return (
    <ChildComponent />
)

子组件 #

const ChildComponent = () => {
    return (
      <div id='someRef'>
          // ...
      </div>
    )
}

修改后桌面端一切正常，但移动端的自动滚动至顶部问题仍未解决。

补充排查信息 #

1. 我已移除所有Link元素，问题依然存在。此前尝试过多种锚点跳转写法：

<Link href={`#about`}>about</Link>
<Link href={`/page1#about`}>about</Link>
<Link href={`/page1/#about`}>about</Link>
<button onClick={() => router.push('/page1#about')}>about</button>

2. 最初使用的Link写法为：

<Link href={`/page1/#about`}>about</Link>

内容的提问来源于stack exchange，提问作者lukaasz555