React中点击Link组件路由跳转后如何实现页面滚动到顶部

两种常用实现方案，优先选全局配置方案，一次配置即可覆盖所有路由跳转场景，无需修改现有业务组件代码。

方案1：全局监听路由变化自动滚动（推荐） #

这个方案兼容所有React Router v5/v6版本，所有Link跳转、编程式导航跳转都会自动触发滚动，维护成本最低。

• 第一步，新建ScrollToTop.js组件：

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  export default function ScrollToTop() {
    const { pathname } = useLocation();
  
    useEffect(() => {
      // 路由路径变更时瞬间滚动到页面顶部
      window.scrollTo(0, 0);
      // 如果需要平滑滚动效果，换成下面这行
      // window.scrollTo({ top: 0, behavior: 'smooth' });
    }, [pathname]);
  
    return null;
  }
  

• 第二步，将组件挂载到路由根节点位置，必须放在Router组件内部、路由出口的同级位置，以v6版本为例：

  import { BrowserRouter, Routes, Route } from 'react-router-dom';
  import ScrollToTop from './ScrollToTop';
  // 其他页面组件导入省略
  
  function App() {
    return (
      <BrowserRouter>
        <ScrollToTop />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/movies/:id" element={<MovieDetailPage />} />
          {/* 其余路由配置 */}
        </Routes>
      </BrowserRouter>
    );
  }
  

配置完成后，你现有代码里的RelatedMovieItem组件不需要做任何修改，点击Link跳转详情页时就会自动滚动到顶部。

方案2：单个Link绑定点击事件（仅单场景需要时使用） #

如果不想做全局配置，只需要给当前这个跳转按钮加滚动逻辑，可以直接给Link组件绑定onClick事件，修改现有组件代码即可：

import { Link } from "react-router-dom";

const RelatedMovieItem = props => {
    const movie = props.movie;
    
    const handleJump = () => {
      window.scrollTo(0, 0);
    };

    return (
        <div className="card" style={{width: "18rem",marginTop: "10px", padding: 0, marginLeft: "10px"}}>
          <img src={movie.imageUrl} className="card-img-top" alt={movie.name} />
          <div className="card-body">
            <h5 className="card-title">{movie.name}</h5>
            <p className="card-text">{movie.description}</p>
            <Link 
              to={`/movies/${movie.id}`} 
              className="btn btn-primary"
              onClick={handleJump}
            >
              Go to details
            </Link>
          </div>
        </div>
    );
};

export default RelatedMovieItem;

补充说明：如果你的页面是局部容器滚动（不是window全局滚动，是给某个div设置了overflow: auto实现独立滚动区域），需要把上面代码里的window.scrollTo替换为对应滚动容器的滚动方法，给容器绑定ref后调用ref.current.scrollTo(0, 0)即可。

React Router v6.4+ 数据路由简化方案 #

如果你使用v6.4版本之后的createBrowserRouter + RouterProvider数据路由模式，可以直接用官方提供的ScrollRestoration组件，在根路由组件中渲染该组件即可自动处理路由跳转的滚动逻辑，不需要自己手动写监听代码。

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