React Link按钮不会滚动到顶部

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

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

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

  return null;
}

function App() {
  return (
    <div>
      <ScrollToTop />
      {/* 其他组件和路由配置 */}
    </div>
  );
}

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

function MyComponent() {
  useEffect(() => {
    const handleScrollToTop = () => {
      window.scrollTo(0, 0);
    };

    const linkButton = document.getElementById('link-button');
    linkButton.addEventListener('click', handleScrollToTop);

    return () => {
      linkButton.removeEventListener('click', handleScrollToTop);
    };
  }, []);

  return (
    <div>
      {/* 其他组件内容 */}
      <Link id="link-button" to="/path">Link按钮</Link>
    </div>
  );
}

import { useRef } from 'react';
import { Link } from 'react-router-dom';

function MyComponent() {
  const linkRef = useRef(null);

  const handleScrollToTop = () => {
    linkRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div>
      {/* 其他组件内容 */}
      <Link ref={linkRef} to="/path">Link按钮</Link>
      <button onClick={handleScrollToTop}>滚动到顶部</button>
    </div>
  );
}