react-router v6路由切换后页面保留上一页滚动位置如何解决

问题原因 #

react-router v6 本身没有内置路由切换后自动滚动到顶部的逻辑，该行为是设计如此，方便不同业务场景自定义滚动行为。

解决方案 #

方案1：全局统一处理（推荐） #

封装全局滚动复位组件，监听路由路径变化自动触发滚动到顶部，适配所有路由切换场景。

1. 新建ScrollToTop.jsx组件：

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

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

  useEffect(() => {
    // 滚动到页面顶部
    window.scrollTo({
      top: 0,
      left: 0,
      // 要平滑滚动效果可改为 'smooth'，默认instant是无动画直接跳转
      behavior: "instant"
    });
  }, [pathname]);

  return null;
};

export default ScrollToTop;

2. 引入到项目根路由层级，放在BrowserRouter内部即可：

// App.jsx 入口文件示例
import { BrowserRouter } from "react-router-dom";
import ScrollToTop from "./components/ScrollToTop";
import NavbarRouter from "./router/NavbarRouter";

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <NavbarRouter />
    </BrowserRouter>
  );
}

方案2：单页面独立处理 #

如果只需要部分页面切换时复位滚动，不需要全局生效，直接在对应页面组件的初始化钩子中加滚动逻辑即可，比如在About、Contact组件中添加：

import { useEffect } from "react";

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

  // 其余组件逻辑...
}

特殊场景适配 #

如果你的页面滚动容器不是全局window，是自定义的带overflow: auto属性的内部容器，只需将window.scrollTo替换为对应容器的DOM操作即可：

import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";

const ScrollToTop = () => {
  const { pathname } = useLocation();
  // 绑定滚动容器的ref
  const scrollContainerRef = useRef(null);

  useEffect(() => {
    scrollContainerRef.current?.scrollTo(0, 0);
  }, [pathname]);

  return (
    <div ref={scrollContainerRef} style={{overflow: 'auto', height: '100vh'}}>
      {/* 页面内容 */}
    </div>
  )
};

补充优化 #

你的Navbar使用了position: fixed固定定位，为了避免页面内容被导航栏遮挡，建议给<Outlet />外层容器添加和导航栏高度相等的padding-top，不影响滚动复位逻辑，可优化页面显示效果。

内容的提问来源于stack exchange，提问作者H Nazmul Hassan