Next.js App Router：如何在布局中获取子组件属性？

下面给几个SSR友好的实现方案，不用每个页面重复写

方案一：静态属性+React上下文 #

这种方式兼容SSR和客户端渲染，适合需要页面组件自主定义标题的场景：

1. 先写个上下文组件用来传递标题：

// app/PageTitleContext.js
'use client';
import { createContext, useContext } from 'react';

const PageTitleContext = createContext(null);

export function PageTitleProvider({ children, title }) {
  return (
    <PageTitleContext.Provider value={title}>
      {children}
    </PageTitleContext.Provider>
  );
}

export function usePageTitle() {
  return useContext(PageTitleContext);
}

2. 页面组件里导出静态title，再用Provider包裹页面内容：

// app/about/page.js
export const pageTitle = '关于我们';

export default function AboutPage() {
  return (
    <PageTitleProvider title={pageTitle}>
      <p>这是关于页面的内容</p>
    </PageTitleProvider>
  );
}

3. 布局里可以双管齐下：SSR时直接导入页面组件拿静态属性，客户端用上下文兜底：

// app/layout.js
import { usePageTitle } from './PageTitleContext';
// 针对特定路由，直接导入对应页面组件
import AboutPage from './about/page';

export default function RootLayout({ children }) {
  // SSR阶段直接读取静态属性
  let title = '';
  if (typeof AboutPage.pageTitle !== 'undefined') {
    title = AboutPage.pageTitle;
  }
  // 客户端渲染时用上下文补全
  const clientTitle = usePageTitle();

  return (
    <html lang="zh-CN">
      <body>
        <h1>{title || clientTitle || '默认标题'}</h1>
        {children}
      </body>
    </html>
  );
}

方案二：利用generateMetadata自定义字段 #

这是最贴合Next.js App Router设计的SSR方案，全程在服务器端处理：

1. 页面组件里通过generateMetadata导出自定义的标题字段：

// app/blog/page.js
export async function generateMetadata() {
  return {
    // 元数据title可以正常定义，同时加个自定义的pageHeading字段
    title: '博客首页',
    pageHeading: '我的个人博客'
  };
}

export default function BlogPage() {
  return <p>这里是博客内容</p>;
}

2. 布局作为服务器组件，直接读取metadata里的自定义字段：

// app/layout.js
export default async function RootLayout({ children, metadata }) {
  return (
    <html lang="zh-CN">
      <body>
        <h1>{metadata.pageHeading || '默认标题'}</h1>
        {children}
      </body>
    </html>
  );
}

方案三：路由路径映射标题 #

如果标题和路由路径一一对应，直接在布局里做映射即可：
先写个客户端组件用来根据路径匹配标题：

// app/PageHeading.js
'use client';
import { usePathname } from 'next/navigation';

export default function PageHeading() {
  const pathname = usePathname();
  const titleMap = {
    '/': '首页',
    '/about': '关于我们',
    '/blog': '我的博客'
  };
  return <h1>{titleMap[pathname] || '默认标题'}</h1>;
}

然后在布局里导入这个组件：

// app/layout.js
import PageHeading from './PageHeading';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <PageHeading />
        {children}
      </body>
    </html>
  );
}

这种方式最省心，适合标题和路由强绑定的场景，不用修改任何页面组件。

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