React Router Dom：<Link />跳转未回到页面顶部的原因与解决方法

1. 问题原因 #

react-router-dom的默认行为会保留页面滚动位置，这是为了优化浏览器前进/后退的体验——比如从列表页滚动到某个位置后进入详情页，返回列表时能回到之前的滚动位置。但这种逻辑在普通页面跳转（比如从首页到隐私政策页）时，就会导致新页面停留在之前的滚动位置，而不是自动回到顶部。

2. 解决方法 #

方法一：使用官方ScrollRestoration组件（推荐） #

react-router-dom自带了ScrollRestoration组件，它会自动处理路由切换时的滚动逻辑：新页面跳转时回到顶部，前进/后退时恢复之前的滚动位置。

步骤：

• 从react-router-dom导入ScrollRestoration
• 在路由的根组件（比如App.js）中添加该组件，放在Routes同级位置

代码示例：

import { Routes, Route, ScrollRestoration, Link } from 'react-router-dom';
import Home from './Home';
import PrivacyPolicy from './PrivacyPolicy';

function App() {
  return (
    <>
      {/* 导航链接 */}
      <nav>
        <Link to="/">首页</Link>
        <Link to="/privacy">隐私政策</Link>
      </nav>

      {/* 路由配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/privacy" element={<PrivacyPolicy />} />
      </Routes>

      {/* 滚动恢复组件 */}
      <ScrollRestoration />
    </>
  );
}

export default App;

方法二：手动监听路由变化实现滚动 #

如果需要自定义滚动逻辑（比如仅特定路由跳转时滚动，或滚动到指定位置），可以通过useLocation钩子监听路由变化，手动调用滚动方法。

步骤：

• 导入useLocation和useEffect
• 监听location.pathname的变化，每次变化时执行window.scrollTo(0, 0)

代码示例：

import { Routes, Route, useLocation, Link } from 'react-router-dom';
import { useEffect } from 'react';
import Home from './Home';
import PrivacyPolicy from './PrivacyPolicy';

function App() {
  const location = useLocation();

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

  return (
    <>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/privacy">隐私政策</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/privacy" element={<PrivacyPolicy />} />
      </Routes>
    </>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Web Ok Solutions Inc.