React路由切换后滚动位置未重置问题咨询

这个现象是React Router的默认滚动恢复行为导致的——框架默认会保留用户的滚动位置，方便返回上一页时回到之前的浏览位置，但跳转到全新页面时，这就会造成滚动条停留在原位置的问题。下面是几种实用的解决办法：

1. 使用React Router v6官方内置组件（推荐） #

直接在路由的根组件中引入ScrollRestoration组件，它会自动处理路由跳转时的滚动重置，同时保留返回页面的滚动位置：

import { ScrollRestoration, Routes, Route } from 'react-router-dom';

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

2. 手动监听路由变化强制滚动到顶部 #

如果使用v5版本或者需要自定义滚动逻辑，可以通过监听location的变化，调用window.scrollTo()实现：

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

// 封装一个滚动到顶部的组件
function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' }); // 可选添加平滑滚动效果
  }, [pathname]);

  return null;
}

// 在路由外层引入该组件
function App() {
  return (
    <>
      <ScrollToTop />
      <Routes>
        {/* 路由配置 */}
      </Routes>
    </>
  );
}

3. 针对单个页面单独处理 #

如果只需要特定页面跳转后回到顶部，直接在该页面组件的useEffect中添加滚动逻辑即可：

import { useEffect } from 'react';

function AboutPage() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div className="about-page">
      {/* 页面内容 */}
    </div>
  );
}

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