Next.js App Router同级Layout无法保留状态问题求助

问题根源分析 #

你遇到的核心矛盾来自Next.js的layout路由规则：

• 当layout.tsx和带参数的页面（[id]/page.tsx）同级时，路由参数id的变化会触发整个layout重新渲染——因为这个layout属于[id]路由段的一部分，参数更新会导致layout重新挂载，侧边栏的滚动状态自然丢失。
• 把layout上移一级后，它属于父路由段（比如docs/layout.tsx），导航时只要在该父路由下切换子页面，layout不会重渲染，但父级layout无法直接访问子路由的id参数。

可行解决方案 #

方案1：用React Context传递页面ID（推荐）

通过Context在父级layout和子页面间传递id，既保留父layout不重渲染的特性，又能让侧边栏获取当前页面ID：

1. 创建页面ID上下文：

// app/docs/page-id-context.tsx
'use client';

import { createContext, useContext, useState, ReactNode } from 'react';

const PageIdContext = createContext<{ pageId: string | null; setPageId: (id: string | null) => void }>({
  pageId: null,
  setPageId: () => {},
});

export function PageIdProvider({ children }: { children: ReactNode }) {
  const [pageId, setPageId] = useState<string | null>(null);
  return (
    <PageIdContext.Provider value={{ pageId, setPageId }}>
      {children}
    </PageIdContext.Provider>
  );
}

export function usePageId() {
  return useContext(PageIdContext);
}

2. 在父级layout中使用Provider并读取ID：

// app/docs/layout.tsx
import { PageIdProvider, usePageId } from './page-id-context';
import Sidebar from './sidebar';

// 抽离需要访问ID的部分为客户端组件
function LayoutContent({ children }: { children: ReactNode }) {
  const { pageId } = usePageId();
  return (
    <div className="flex">
      <Sidebar currentPageId={pageId} />
      <main>{children}</main>
    </div>
  );
}

export default function DocsLayout({ children }: { children: ReactNode }) {
  return (
    <PageIdProvider>
      <LayoutContent>{children}</LayoutContent>
    </PageIdProvider>
  );
}

3. 在子页面中设置当前ID：

// app/docs/[id]/page.tsx
'use client';

import { usePageId } from '../page-id-context';
import { useParams, useEffect } from 'next/navigation';

export default function DocPage() {
  const params = useParams();
  const { setPageId } = usePageId();
  
  useEffect(() => {
    setPageId(params.id as string);
    return () => setPageId(null);
  }, [params.id, setPageId]);

  return <div>文档内容：{params.id}</div>;
}

方案2：优化同级Layout的重渲染问题

如果坚持使用同级layout，可以通过React.memo减少侧边栏重渲染，并手动保存滚动位置：

1. 用memo包裹侧边栏组件：

// app/docs/[id]/sidebar.tsx
'use client';

import { memo, useEffect, useRef } from 'react';

const Sidebar = memo(({ currentPageId }: { currentPageId: string }) => {
  const sidebarRef = useRef<HTMLDivElement>(null);
  
  // 恢复滚动位置
  useEffect(() => {
    const scrollTop = localStorage.getItem('sidebarScrollTop');
    if (scrollTop && sidebarRef.current) {
      sidebarRef.current.scrollTop = parseInt(scrollTop, 10);
    }
  }, []);

  // 保存滚动位置
  useEffect(() => {
    if (sidebarRef.current) {
      localStorage.setItem('sidebarScrollTop', sidebarRef.current.scrollTop.toString());
    }
  }, [currentPageId]);

  return (
    <div ref={sidebarRef} className="overflow-y-auto" style={{ width: '200px', height: '100vh' }}>
      {/* 侧边栏链接列表 */}
    </div>
  );
});

export default Sidebar;

2. 在同级layout中使用优化后的侧边栏：

// app/docs/[id]/layout.tsx
import Sidebar from './sidebar';
import { useParams } from 'next/navigation';

export default function DocLayout({ children }: { children: ReactNode }) {
  const params = useParams();
  return (
    <div className="flex">
      <Sidebar currentPageId={params.id as string} />
      <main>{children}</main>
    </div>
  );
}

关键注意点 #

• Next.js的layout不重渲染规则仅适用于路由段无变化的场景：如果layout所在路由段的参数（如[id]）更新，layout必然会重新渲染，这是框架的设计逻辑。
• 所有用到React状态、Context或路由hooks的组件，必须添加'use client'标记。

内容的提问来源于stack exchange，提问作者Charles de Dreuille