好吧，如果有人读到这篇文章，在我的情况下，问题不是以上任何一个。你必须尝试以上任何方式的第一个建议。我做了一切，包括preventDefault()，但没有帮助我。问题是;使用styled-components。因为，样式组件在每次渲染时都会给予一个随机的类名。所以它会重置滚动。我从css中给出了这个类名，并解决了我的问题。

@floydophone在推特上回答了这一条。
https://twitter.com/floydophone/status/608129119025561600
@bengrunfeld @reactjs您在链接处理程序中忘记了preventDefault()

我想在这里为那些不使用锚标记的人补充一点，preventDefault不会保存你。尽管它很奇怪，但对我来说，它与在div中使用

display:table > display:tablecell

由于某种原因，在这种情况下，当有任何重新呈现时，子组件的滚动位置丢失。当我切换到flexbox（显示：flex）时，问题消失了。

如果呈现触发器滚动到顶部，这通常意味着某些UI组件由于状态而更改其维度，这可以通过添加最小宽度/高度来修复

发生这种情况的原因可能是redux状态发生了更改，redux状态将显示代码中使用它的所有位置的更改。尝试使用该组件的本地状态进行更改，该组件在执行操作时会滚动页面。

2022年黑客解决方案：

我找不到一种方法来完全防止重新呈现时的滚动。preventDefault没有帮助，而且我没有访问特定元素结构的权限，但我有滚动元素的className。

useEffect(() => {
  const el = document.getElementsByClassName('my-classname')?.[0];
  const newTimeoutRef = setTimeout(() => el?.scrollTo(0, scrollTop), 50);
  return () => clearTimeout(newTimeoutRef);
}, [scrollTop]);

然后在之前导致滚动到顶部的事件中设置scrollTop（作为组件状态）。
这里的黑客是setTimeout，它基本上给DOM时间滚动到顶部之前调用您的el.scrollTo，它 Flink 了一点，但它是最好的解决方案，为我工作。

是的，我可以确认，如果你用相同的key属性将每个styled元素 Package 在一个div中，它将阻止页面滚动，例如：

<div key="A"><Doughnut data={data} /></div>
<div key="A"><Doughnut data={data} /></div>