React Router 6.15 中实现页面跳转时自动滚动到顶部的完整方案

在 React Router 6.15 中，ScrollRestoration 组件可原生支持导航时滚动至顶部及历史回退时恢复滚动位置；若需更精细控制，也可通过自定义 useScrollToTop Hook 或布局级组件实现。

在 React Router 6.15 中，`ScrollRestoration` 组件可原生支持导航时滚动至顶部及历史回退时恢复滚动位置；若需更精细控制，也可通过自定义 `useScrollToTop` Hook 或布局级组件实现。

很多开发者可能没意识到，在 React Router v6.15 里，框架已经内置了相当完善的滚动行为管理能力。这意味着你再也不需要像以前那样，手动封装一个 ScrollToTop 组件了。直接就能实现我们理想中的用户体验：跳转新页面时自动滚动到顶部，而点击浏览器后退按钮时，又能精准地回到之前的阅读位置。具体怎么操作呢？核心方案其实就两种：要么直接用官方的，要么根据需求“自己动手”。

✅ 推荐方案：使用 （数据路由专属）

这个 组件，可以看作是 React Router 官方给的“保姆级”工具。不过得注意，它有个使用前提：只适用于数据路由器（比如 createBrowserRouter），而且必须乖乖待在路由的上下文环境里，也就是放在 RouterProvider 内部才行。

它的工作逻辑非常清晰，就干两件事：

• 当用户在应用内进行新的导航（push）时，它会自动将窗口滚动到页面顶部。
• 而当用户点击浏览器的后退或前进按钮（pop）时，它又能非常聪明地恢复到该路由上一次离开时的滚动位置。这背后依赖的是浏览器 history.state 的机制。

使用起来也相当省心。你只需要在根布局组件（比如叫做 Layout）里渲染一次就够了。常规做法是把它放在 的旁边：

// components/Layout.tsx
import { Outlet, ScrollRestoration } from 'react-router-dom';

export default function Layout() {
  return (
    

      
My App
      

        {/* ScrollRestoration 必须在此处渲染 */}
        
        
      
      
    

  );
}

这里有几点需要特别注意：

• 千万别把 ScrollRestoration 直接塞到通过 createRoutesFromElements 定义的 JSX 路由结构里（比如写在某个 标签内部）。因为它本质上是一个UI组件，而非路由配置元素。
• 它的生效依赖于浏览器将 history.scrollRestoration 设置为 ‘manual’。所以，得确保你的项目里没有其他代码把这个设置给覆盖掉。
• 当然，如果默认的滚动整个页面的行为不满足你的需求，比如你只想滚动某个特定容器，官方也预留了自定义的接口，可以通过 getKey 属性来实现更精细的控制（具体可以参考官方文档）。