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

export default ScrollToTop;

将该组件放在路由根容器内，确保所有路由切换都会触发滚动：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';
import About from './About';

function App() {
  return (
    <Router>
      <ScrollToTop />
      <Routes>
        <Route path="/about" element={<About />} />
        {/* 其他路由配置 */}
      </Routes>
    </Router>
  );
}

方法二：利用React Router内置配置（v6.4+） #

如果使用的是React Router v6.4及以上的Data Router，直接在路由创建时配置scrollRestoration：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import About from './About';

const router = createBrowserRouter(
  [
    {
      path: '/',
      children: [
        { path: 'about', element: <About /> },
      ],
    },
  ],
  {
    scrollRestoration: 'top', // 强制跳转后回到顶部
  }
);

function Root() {
  return <RouterProvider router={router} />;
}

方法三：单个Link手动处理 #

如果只需要针对特定Link生效，直接在点击事件中手动触发滚动：

<Link 
  className="footerText" 
  to="./about"
  onClick={() => window.scrollTo(0, 0)}
>
  ABOUT
</Link>

注意事项 #

如果以上方法无效，检查页面中是否有固定定位元素、自定义滚动容器，或者其他代码修改了window.scrollTop值，这些可能会干扰默认滚动行为。

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