React多页面应用导航路由问题：页面切换后滚动位置未重置

方法1：使用React Router v6+ 内置的ScrollRestoration组件 #

这是官方推荐的方案，直接在路由根组件里引入使用即可，它会自动在路由切换时将页面滚动到顶部，同时还能保留返回页面时的滚动位置（和浏览器默认行为一致）：

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

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

方法2：手动监听路由变化实现滚动重置 #

如果用的是React Router老版本，或者需要自定义滚动逻辑，可以通过监听location变化，手动触发滚动到顶部：

函数组件（React Router v5/v6通用）

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

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

  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 可选，开启平滑滚动效果
    });
  }, [location.pathname]); // 路由路径变化时执行

  return null;
}

// 在App组件中引入该组件
function App() {
  return (
    <>
      <ScrollToTop />
      {/* 路由组件 */}
    </>
  );
}

类组件

如果项目中仍使用类组件，可通过withRouter高阶组件监听路由变化：

import React from 'react';
import { withRouter } from 'react-router-dom';

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }
}

export default withRouter(ScrollToTop);

方法3：处理容器内滚动的情况 #

如果页面滚动不是基于window，而是某个自定义容器（比如设置了overflow: auto的div），需要找到对应DOM元素重置滚动位置：

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

function PageWithContainerScroll() {
  const containerRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.scrollTop = 0;
    }
  }, [location.pathname]);

  return (
    <div ref={containerRef} style={{ overflow: 'auto', height: '100vh' }}>
      {/* 页面内容 */}
    </div>
  );
}

注意事项 #

• 如果页面有锚点跳转需求（比如/about#section1），需要额外处理：先滚动到顶部，再定位到锚点，避免逻辑冲突。
• 确保路由切换时，location变化能被正确监听，或者对应组件会重新挂载。

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