如何使用 NextJS 13 应用程序路由器将数据从页面传递到布局组件？

Question

我正在努力将数据从子组件传递到布局组件，特别是在布局组件中动态渲染“标题”。下面是我的问题的简化版本。我正在使用最新的 Next.js (13) 应用程序路由器/目录和嵌套布局。

布局：

export default function UsersLayout({children}) {
  <>
    {/* I need the dynamic title here */}
    {children}
  </>
}

页：

export default async function Users() {
  const pageTitle = "Users" // I want to pass this string to the layout

  return (
    <>
      ...
    </>
  );
}

Answer 1

没有找到任何合理的解决方案，不得不稍微重组组件。

创建带有道具标题的组件，并且必须在每个页面（叶）内使用它。不伟大也不可怕。

布局：

export default function UsersLayout({children}) {
  <>
    {children}
  </>
}

页：

export default async function Users() {
  return (
    <>
      <PageHeader title="Clients" />
      ...
    </>
  );
}

现在可能没问题，但我仍然很好奇如何做到这一点，也许没有全局状态就没有。