Javascript 如何在React中导航到新路线之前更改滚动位置？

我已经有了一个使用react钩子的工作解决方案，该钩子可以滚动到路由更改页面的顶部，但不幸的是，这不适用于我的用例

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    return () => window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

问题是，我正在使用react infinite scroll组件包在一些路由中实现无限滚动，在这些路由上，会在

componentDidMount

hook上调度一个API调用，以获取初始数据，当滚动位置在现有数据的中间时，还会触发进一步的API调用

滚动位置的更改似乎是在呈现新组件之后发生的，这会导致同时重复的API调用。但是，如果在更改路线之前滚动位置已经在顶部，则一切正常

我需要一种方法来确保在更改路线之前，滚动位置会转到顶部。最好的方法是什么？我已经看过了几乎每一篇关于react router滚动定位的文章，但我似乎无法将我的脑袋放在上面。 任何帮助都将不胜感激