React路由切换时如何实现页面直接加载在顶部，避免先跳转后滚动的过程

我完全懂你遇到的困扰——点击「关于我们」跳转后，页面居然停留在之前的滚动位置，得手动往上翻才能看到开头，而且现在的代码是先跳转再滚动，还能看到滚动的过程，体验确实不太好。

先说说为什么会出现这个问题：React Router是单页应用路由，切换页面时不会重新加载整个浏览器页面，所以浏览器默认不会自动帮你滚到顶部。你当前的代码用history.listen()来监听路由变化，这是在路由跳转完成、页面已经渲染之后才触发的，所以会出现“先看到旧位置，再滚动到顶部”的过程。

下面给你几个更优雅的解决方案，让页面直接加载在顶部，完全看不到滚动过程：

方案一：针对React Router v5优化你的代码 #

把原来的withRouter换成useLocation钩子，直接监听路径变化，同时设置滚动为瞬间完成：

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

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

  useEffect(() => {
    // 用instant行为让滚动瞬间完成，没有动画
    window.scrollTo({
      top: 0,
      behavior: 'instant'
    });
  }, [pathname]); // 每次路径变化就执行滚动

  return null;
}

// 然后在路由配置里正常使用
<BrowserRouter>
  <ScrollToTop />
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</BrowserRouter>

这个方案的优势是：

• 利用useLocation直接获取路径，比withRouter更简洁（函数组件推荐用钩子）
• 依赖pathname变化触发滚动，时机更早，配合instant行为，用户完全感知不到滚动过程

方案二：React Router v6 推荐用法（内置组件） #

如果你已经升级到React Router v6，官方提供了ScrollRestoration组件，专门处理滚动问题，不仅能自动滚到顶部，还会记住返回页面时的滚动位置，体验更好：

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

// 直接把这个组件放在Router内部即可
<BrowserRouter>
  <ScrollRestoration />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

要是你想自己实现v6版本的滚动组件，也可以这样写：

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.key]); // 用location.key更精准，同路径不同参数也会触发

  return null;
}

额外处理：异步数据加载的情况 #

如果你的目标页面（比如About组件）是异步加载数据的，可能会出现“先滚动到顶部，数据加载后页面被撑开，又回到中间位置”的情况。这时候需要在数据加载完成后再执行一次滚动：

function About() {
  const [aboutData, setAboutData] = useState(null);

  useEffect(() => {
    // 模拟异步请求数据
    fetch('/api/about-content')
      .then(res => res.json())
      .then(data => {
        setAboutData(data);
        // 数据加载完成后再滚一次顶部
        window.scrollTo(0, 0);
      });
  }, []);

  return (
    <div className="about-page">
      {aboutData ? (
        <div>{aboutData.content}</div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

这样就能确保无论页面内容什么时候渲染完成，都能保持在顶部位置了。

内容的提问来源于stack exchange，提问作者Hamidur Rahman