Next.js app目录中如何从布局向子组件传递数据？

开发者阿泽

2026-8-3

在Next.js 13布局与子页面间共享UI状态的解决方案

我常碰到这样的场景：在持久化布局里加个通知按钮，点击后在主应用页面打开侧边面板。本来想把isNotificationsPaneOpen状态传给子组件来渲染面板，但Next.js 13 Beta明确规定无法在父布局与子组件间直接传递数据（官方说明是只能重复获取相同数据，React会自动去重不影响性能）。把这种前端UI状态存到后端既冗余又没必要，毕竟后端不需要知道通知面板的开合状态。这是个很常见的场景，该怎么处理？

代码示例

layout.tsx

export default function NavbarLayout({
  children, 
}: {
  children: React.ReactNode,
}) {
  const [isNotificationsPaneOpen, setIsNotificationsPaneOpen] = useState(false);
  return (
    <div>
      <nav>
        <button onClick={() => setIsNotificationsPaneOpen((prev) => !prev)}>Notifications</button>
      </nav>
      {/* 怎么把isNotificationsPaneOpen传给children？ */}
      {children}
    </div>
  );
}

期望的page.tsx用法

interface PageProps {
  isNotificationsPaneOpen: boolean;
}

function Page({isNotificationsPaneOpen}: PageProps): JSX.Element {
    // 根据isNotificationsPaneOpen条件渲染内容
    ...
}

现有方案的局限

在布局中直接包含切换面板
这是目前比较合理的方案，但只适用于依赖状态的组件在所有页面都一致的场景（比如全局通知面板）。如果是像明暗模式切换这种需要各页面渲染不同内容的场景，这个方案就不通用了。
用localStorage等外部存储传递数据
这更像是临时 workaround：布局把状态存入浏览器存储，页面通过读取存储来判断状态。但这种方式需要处理存储同步、初始状态匹配等问题，还可能出现状态不一致的情况，不是理想的解决方案。

通用解决方案：使用React Context

通过创建Context来在布局和子页面间共享状态，这是React官方推荐的跨组件层级传递状态的方式，完全适配Next.js 13的App Router。

步骤1：创建状态Context

新建一个NotificationContext.tsx文件：

'use client';

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

interface NotificationContextType {
  isNotificationsPaneOpen: boolean;
  setIsNotificationsPaneOpen: (value: boolean) => void;
}

const NotificationContext = createContext<NotificationContextType | undefined>(undefined);

export function NotificationProvider({ children }: { children: ReactNode }) {
  const [isNotificationsPaneOpen, setIsNotificationsPaneOpen] = useState(false);

  return (
    <NotificationContext.Provider value={{ isNotificationsPaneOpen, setIsNotificationsPaneOpen }}>
      {children}
    </NotificationContext.Provider>
  );
}

export function useNotification() {
  const context = useContext(NotificationContext);
  if (!context) {
    throw new Error('useNotification must be used within a NotificationProvider');
  }
  return context;
}

步骤2：在根布局中挂载Provider

修改根布局（比如app/layout.tsx），用NotificationProvider包裹所有子内容，确保布局和页面都能访问到Context：

import { NotificationProvider } from './NotificationContext';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="zh-CN">
      <body>
        <NotificationProvider>
          {children}
        </NotificationProvider>
      </body>
    </html>
  );
}

步骤3：在布局中使用状态

修改NavbarLayout.tsx，通过自定义钩子获取状态更新函数：

'use client';

import { useNotification } from './NotificationContext';

export default function NavbarLayout({
  children, 
}: {
  children: React.ReactNode,
}) {
  const { setIsNotificationsPaneOpen } = useNotification();
  
  return (
    <div>
      <nav>
        <button onClick={() => setIsNotificationsPaneOpen((prev) => !prev)}>Notifications</button>
      </nav>
      {children}
    </div>
  );
}

步骤4：在子页面中获取状态

修改page.tsx，用useNotification钩子拿到状态，按需渲染内容：

'use client';

import { useNotification } from './NotificationContext';

function Page(): JSX.Element {
  const { isNotificationsPaneOpen } = useNotification();
  
  return (
    <div>
      {isNotificationsPaneOpen ? (
        <div className="notification-pane">通知面板内容</div>
      ) : (
        <div>主页面内容</div>
      )}
    </div>
  );
}

export default Page;

其他可选方案

状态管理库：比如Zustand、Jotai或Redux，适合更复杂的全局状态管理场景。以Zustand为例，只需要创建一个简单的store，就能在布局和页面中直接访问和修改状态，代码更简洁。
URL参数（不推荐）：把状态编码到URL查询参数中（比如?notifications=open），但这种方式会把UI状态暴露在URL上，刷新页面会保留状态，多数场景下不符合需求。

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