在 React Router 6.15 中，ScrollRestoration 组件可原生支持导航时滚动至顶部及历史回退时恢复滚动位置；若需更精细控制，也可通过自定义 useScrollToTop Hook 或布局级组件实现。
在 React Router 6.15 中，`ScrollRestoration` 组件可原生支持导航时滚动至顶部及历史回退时恢复滚动位置；若需更精细控制，也可通过自定义 `useScrollToTop` Hook 或布局级组件实现。
很多开发者可能没意识到，在 React Router v6.15 里，框架已经内置了相当完善的滚动行为管理能力。这意味着你再也不需要像以前那样，手动封装一个 ScrollToTop 组件了。直接就能实现我们理想中的用户体验：跳转新页面时自动滚动到顶部，而点击浏览器后退按钮时，又能精准地回到之前的阅读位置。具体怎么操作呢？核心方案其实就两种：要么直接用官方的，要么根据需求“自己动手”。
✅ 推荐方案：使用
这个
它的工作逻辑非常清晰，就干两件事：
- 当用户在应用内进行新的导航（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 属性来实现更精细的控制（具体可以参考官方文档）。
