React Router v6页面切换时如何恢复滚动位置？

AI 小北

2026-7-23

React Router v6 页面滚动位置问题的解决方案

在React Router v6中，通过<Link>跳转路由时页面保留原有滚动位置是常见问题，以下是两种实用解决方式：

一、全局自动滚动到顶部（推荐）

通过监听路由变化，在每次路由切换时自动将页面滚动到顶部，适用于大多数场景。

修改你的App组件代码：

导入所需的Hook：

import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
import { useEffect } from 'react';

添加一个滚动处理组件：

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

  useEffect(() => {
    // 路由切换时滚动到页面顶部，可选behavior: 'smooth'实现平滑滚动
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [pathname]);

  return null;
}

在Router内部引入该组件：

function App() {
  return (
    <Router>
      <ScrollToTop />
      <div className="App">
        <Navbar />
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/movies/:id' element={<MovieDetails />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

二、针对特定路由自定义滚动行为

如果部分页面需要滚动到指定位置而非顶部，可在对应页面组件中单独处理：

以MovieDetails组件为例：

import { useEffect } from 'react';

function MovieDetails() {
  useEffect(() => {
    // 滚动到页面顶部
    window.scrollTo(0, 0);
    
    // 若需滚动到指定元素，可替换为以下代码：
    // const targetElement = document.getElementById('movie-title');
    // targetElement?.scrollIntoView({ behavior: 'smooth' });
  }, []);

  // 组件其余逻辑...
}