Next.js侧边栏选择指定页面跳转后自动回顶部问题求助

• 90%概率是布局组件挂载位置错误。从你贴的Dashboard代码可以看到，业务页面直接嵌套引入了BaseLayout，意味着每个页面都会单独挂载一次侧边栏。Next.js路由跳转时会卸载旧页面的完整组件树（包括侧边栏），再挂载新页面的组件树，新生成的滚动容器默认scrollTop为0，自然会回到顶部。
• 你代码里的scroll-sidebar是老式后台模板的典型类名，这类类名一般会被绑定perfect-scrollbar之类的自定义滚动条插件，组件重挂载时插件初始化会强制重置滚动位置到顶部，哪怕你没手动写重置逻辑也会触发。
• 额外问题：侧边栏子菜单的展开状态isOpen存在组件内部state，组件重挂载后所有子菜单会回到默认收起状态，侧边栏整体高度变化也会造成视觉上的滚动错位。

第一步：把布局提升到全局_app.js挂载（治本方案） #

不要在每个业务页面单独引入BaseLayout/LayoutWithSidebar，把布局移到pages/_app.js中持久化挂载，保证路由切换时侧边栏不会被销毁重建：

// pages/_app.js
import BaseLayout from '@layouts/BaseLayout';
function MyApp({ Component, pageProps }) {
  return (
    <BaseLayout>
      <Component {...pageProps} />
    </BaseLayout>
  )
}
export default MyApp

改完后Dashboard这类业务页面只需要保留自身业务内容，移除嵌套的BaseLayout引入即可。

第二步：滚动位置缓存兜底 #

如果项目结构限制没法调整布局挂载位置，就手动给侧边栏滚动容器加位置缓存逻辑，修改LayoutWithSidebar.js：

import React, { useRef, useEffect } from 'react';
// 其他原有引入保持不变

const LayoutWithSidebar = ({ toggleSideBar, setToggleSidebar, btn }) => {
  const { t } = useTranslation();
  const scrollContainerRef = useRef(null);
  const SCROLL_CACHE_KEY = 'sidebar_scroll_position';

  const handleEnterMouse = () => {
    setToggleSidebar(true);
  };

  useEffect(() => {
    const scrollContainer = scrollContainerRef.current;
    if (!scrollContainer) return;
    // 挂载时恢复之前的滚动位置
    const savedPosition = sessionStorage.getItem(SCROLL_CACHE_KEY);
    if (savedPosition) {
      requestAnimationFrame(() => {
        scrollContainer.scrollTop = Number(savedPosition);
      });
    }
    // 滚动时实时保存位置
    const handleScroll = () => {
      sessionStorage.setItem(SCROLL_CACHE_KEY, String(scrollContainer.scrollTop));
    };
    scrollContainer.addEventListener('scroll', handleScroll);
    return () => scrollContainer.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <aside
      className={`left-sidebar-style ${
        toggleSideBar ? 'open-left-sidebar' : 'left-sidebar'
      }`}
      onMouseEnter={handleEnterMouse}
      data-sidebarbg="skin5">
      {/* 给滚动容器绑定ref */}
      <div className="scroll-sidebar" ref={scrollContainerRef}>
        <UserProfile btn={btn} toggleSideBar={toggleSideBar} translation={t} />
        <SidebarLinks btn={btn} toggleSideBar={toggleSideBar} translation={t} />
      </div>
      {(toggleSideBar || btn) && <SidebarFooter />}
      <style jsx toggleSideBar={toggleSideBar}>
        {Styles}
      </style>
    </aside>
  );
};

export default LayoutWithSidebar;

第三步：修复子菜单展开状态重置 #

修改SideBarItem.js里的子菜单初始状态逻辑，根据当前路由自动展开对应父菜单，避免高度变化导致滚动错位：

// 把原来的 useState(false) 替换为根据路由判断初始值
const [isOpen, setIsOpen] = useState(() => {
  if (!subs) return false;
  // 当前路由属于该菜单下的子路由时默认展开
  return subs.some(sub => sub.route === router.pathname);
});

如果以上改完仍有问题，检查全局CSS或者路由监听事件里有没有写全局滚动重置逻辑，这类逻辑经常会误选中侧边栏的滚动容器，强制把scrollTop设为0，找到后给侧边栏容器加排除判断即可。

内容的提问来源于stack exchange，提问作者kalibri_code_2022