React Link按钮不会滚动到顶部

是因为React Link组件默认是使用浏览器的内置滚动行为，而不是滚动到页面顶部。如果想要实现点击React Link按钮后滚动到页面顶部的效果，可以通过以下几种方式实现：

使用React Router的ScrollToTop组件：React Router提供了一个ScrollToTop组件，可以在路由切换时自动滚动到页面顶部。可以在应用的根组件中使用ScrollToTop组件，例如：

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>
  );
}

使用React的useEffect钩子函数：可以在React组件中使用useEffect钩子函数监听React Link按钮的点击事件，然后在回调函数中将页面滚动到顶部。例如：

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>
  );
}

使用原生JavaScript的scrollIntoView方法：可以在React组件中使用原生JavaScript的scrollIntoView方法将页面滚动到顶部。例如：

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>
  );
}

以上是三种常见的实现方式，根据具体情况选择适合的方式即可。