React Router Dom v6 路由切换默认滚动到顶部失效问题求解

我之前也碰到过这个问题，React Router v6确实调整了路由切换时的滚动行为——v5默认会自动滚到页面顶部，但v6为了优化用户体验（比如从列表页返回时保留之前的滚动位置），默认是维持当前滚动位置的，所以需要我们手动实现滚动到顶部的逻辑。结合你用createBrowserRouter的代码结构，给你两种可行的解决方案：

方案一：自定义滚动到顶部组件（推荐，适配你的多布局结构） #

这个方法很直观，我们创建一个监听路由变化的组件，每次路径改变就触发滚动到顶部，然后把它加到各个根布局里：

1. 新建一个ScrollToTop.jsx组件：

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

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

  // 每次路径变化时，滚动到页面顶部
  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 可选，加个平滑滚动效果，不需要可以去掉
    });
  }, [pathname]);

  return null; // 这个组件不需要渲染任何内容
}

2. 在你的各个根布局组件中引入这个组件，比如LayoutMain.jsx、DashboardLayout.jsx、UserProfileLayout.jsx：
   以LayoutMain为例：

import { Outlet } from 'react-router-dom';
import ScrollToTop from '../path/to/ScrollToTop'; // 替换成你的组件路径

function LayoutMain() {
  return (
    <>
      <ScrollToTop />
      {/* 原来的布局内容，比如导航栏、页脚等 */}
      <Outlet />
    </>
  );
}

export default LayoutMain;

这样不管你切换到哪个路由组（前台主布局、后台仪表盘、用户个人中心），只要路径变化，页面都会自动滚到顶部。

方案二：通过createBrowserRouter的配置全局处理 #

如果你不想在每个布局里加组件，也可以直接在创建router时配置滚动恢复逻辑：

import { createBrowserRouter } from "react-router-dom";
// ...其他导入

export const router = createBrowserRouter(
  [
    // 你的完整路由配置数组
  ],
  {
    scrollRestoration: "manual", // 手动控制滚动行为
    initializeScrollRestoration() {
      // 返回一个清理函数，每次路由切换时执行
      return () => {
        window.scrollTo(0, 0);
      };
    },
  }
);

这个方式是全局生效的，不需要修改各个布局组件，适合所有路由都需要滚动到顶部的场景。

两种方案都能解决你的问题，你可以根据自己的代码习惯选择～

备注：内容来源于stack exchange，提问作者swdRana