React项目页面切换后如何默认回到顶部？技术咨询

方法1：React Router v6+ 内置滚动恢复组件 #

如果你用的是React Router v6及以上版本，直接用官方提供的ScrollRestoration组件就能解决。把它放在路由根组件（比如App.jsx）里即可：

import { ScrollRestoration } from 'react-router-dom';

function App() {
  return (
    <div>
      {/* 你的导航栏、路由出口等内容 */}
      <ScrollRestoration />
    </div>
  );
}

这个组件会自动在路由切换时把页面滚到顶部，还能记住之前页面的滚动位置（返回旧页面时自动恢复），刚好匹配你的需求。

方法2：自定义路由监听逻辑 #

如果需要更灵活的控制（比如某些页面不需要回到顶部），可以用useLocation监听路由变化，手动触发滚动：

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

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

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

  return null;
}

// 在App组件中引入这个自定义组件
function App() {
  return (
    <div>
      <ScrollToTop />
      {/* 导航栏和路由出口 */}
    </div>
  );
}

只要路径发生变化，页面就会自动滚动到顶部。

方法3：非React Router场景（自定义导航） #

如果你的导航是自己写的跳转逻辑（没用到React Router），直接在导航项的点击事件里加滚动代码就行：

// 导航点击事件示例
const handleNavClick = (targetPage) => {
  // 你的页面切换逻辑（比如切换组件状态、渲染对应页面）
  switchCurrentPage(targetPage);
  // 滚动到页面顶部
  window.scrollTo(0, 0);
};

补充：你要找的专业术语 #

这个需求对应的专业说法是路由切换时的滚动恢复/滚动到顶部（Scroll Restoration on Route Change），以后搜这个关键词就能精准找到相关内容。

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