标题：React Router v6 页面跳转后自动滚动到顶部的实现方案
关键词：React Router v6、页面滚动、SPA、用户体验、前端开发
描述：本文详细介绍了在React Router v6中实现页面跳转后自动滚动到顶部的多种方法，包括内置API、自定义Hook以及Layout组件封装，帮助开发者提升单页应用的用户体验。

正文：

在单页应用（SPA）开发中，React Router v6 是管理路由的核心工具，但默认情况下，页面跳转后不会自动滚动到顶部。这可能导致用户在新页面中停留在旧页面的滚动位置，体验不佳。本文将分享几种实用的解决方案，让你的应用跳转更符合用户预期。

方法一：使用ScrollRestoration组件

React Router v6 内置了 ScrollRestoration 组件，可轻松实现滚动复位功能。只需在根路由组件中添加以下代码：

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

function App() {
  return (
    <>
      <ScrollRestoration />
      <!-- 其他路由组件 -->
    </>
  );
}

此组件会监听路由变化，并在跳转后将页面滚动至顶部。缺点是仅支持浏览器原生行为，无法自定义滚动逻辑。

方法二：自定义Hook监听路由变化

如果需要更精细的控制（如平滑滚动），可以通过 useLocation 和 useEffect 自定义Hook：

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

export default function useScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth', // 启用平滑滚动
    });
  }, [pathname]);
}

// 在页面组件中调用：
useScrollToTop();

此方案灵活性高，适合需要动画效果的场景。

方法三：封装Layout组件统一处理

对于多页面共享的布局，可以在 Layout 组件中统一集成滚动逻辑：

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return <Outlet />;
}

这种方式避免了在每个页面重复代码，尤其适合大型项目。

注意事项

1. 异步加载内容：如果页面数据通过API异步获取，需在数据加载完成后触发滚动。
2. 锚点跳转：若需保留锚点（如 #section）功能，需额外判断路由的 hash 属性。
3. 性能优化：频繁路由跳转时，避免过度触发滚动事件。

通过上述方法，开发者可以轻松解决React Router v6的滚动问题，显著提升用户体验。实际项目中，建议根据需求选择最适合的方案，或结合多种方式实现更复杂的功能。