Next.js13 App Router路由切换触发全组件重渲染及状态丢失求助

问题根源 #

Next.js 13 App Router 默认所有组件为服务器组件，这类组件无状态且每次路由切换会重新渲染。即便你写了客户端组件，如果它被嵌套在服务器组件下，路由切换时父组件的重新渲染会导致客户端组件被重新挂载，useState 状态自然被清空。而 Next.js 12 Page Router 默认所有组件是客户端组件，所以状态能在路由切换时保留。

解决方案 #

1. 明确标记客户端组件

给需要保留状态的组件顶部加上 'use client' 指令，确保组件运行在客户端环境：

// components/MyTabs.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function MyTabs() {
  const [activeTab, setActiveTab] = useState('tab1');
  const router = useRouter();

  const handleTabClick = (tabId: string) => {
    setActiveTab(tabId);
    router.push(`/items/${tabId}`);
  };

  return (
    <div className="tabs-container">
      {/* 标签页内容 */}
    </div>
  );
}

2. 提升客户端组件层级

把需要保留状态的客户端组件放到路由树的顶层（比如 layout.tsx），这样路由切换时顶层组件不会被重新挂载，状态得以保留：

// app/layout.tsx
import MyTabs from '@/components/MyTabs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <MyTabs /> {/* 这里的组件在路由切换时不会重新挂载 */}
        <main>{children}</main>
      </body>
    </html>
  );
}

3. 处理标签页滚动状态

对于标签页的滚动位置，不要直接修改 DOM 样式，改用 useRef 保存 DOM 引用，结合 useEffect 在路由切换后恢复状态：

'use client';

import { useState, useRef, useEffect } from 'react';
import { usePathname } from 'next/navigation';

export default function MyTabs() {
  const tabsRef = useRef<HTMLDivElement>(null);
  const [scrollOffset, setScrollOffset] = useState(0);
  const pathname = usePathname();

  // 点击标签页时记录滚动偏移
  const scrollToTab = (tabElement: HTMLElement) => {
    const container = tabsRef.current;
    if (!container) return;
    const offset = tabElement.offsetLeft - container.offsetWidth / 2 + tabElement.offsetWidth / 2;
    container.style.transform = `translateX(-${offset}px)`;
    setScrollOffset(offset);
  };

  // 路由切换后恢复滚动状态
  useEffect(() => {
    const container = tabsRef.current;
    if (container) {
      container.style.transform = `translateX(-${scrollOffset}px)`;
    }
  }, [pathname, scrollOffset]);

  return (
    <div ref={tabsRef} className="tabs-scroll-container">
      {/* 标签页元素 */}
    </div>
  );
}

4. 避免不必要的服务器组件嵌套

确保客户端组件的父组件不是服务器组件，或者父组件不会在路由切换时重新渲染。如果父组件必须是服务器组件，可通过 Suspense 包裹客户端组件，但这不会解决状态保留问题，只是优化加载体验。

总结 #

不是 Next.js 13 App Router 设计缺陷，而是需要正确区分服务器组件与客户端组件，合理组织组件层级。通过标记客户端组件并提升其层级，就能实现路由切换时保留状态、避免整页重渲染的效果，无需依赖繁琐的 Context 方案。

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