Question

在 Next.js 13 中将 props 传递给动态路由（App Router）的布局

2023-11-09

1571

javascript next.js next.js13 nextjs-dynamic-routing

我想将 props 传递给某些动态路由的 Layout。这是项目结构：

/app
-/(site)
--/layout.tsx
--/page.tsx
--/[slug]/page.tsx
--/[slug]/layout.tsx

在站点布局中：

export default async function IndexRoute({
  children
}: {
  children: React.ReactNode
}) {
  const settings = await getSettings()

  const layout = (
    <html  lang='en'>
      <body>
        <div className='flex min-h-screen flex-col'>
          <a className='sr-only' href='#mainContent'>
            Skip to content
          </a>
          <Suspense>
            <Masthead />
          </Suspense>
          <main className='flex flex-1 flex-col ' id='mainContent'>
            <Suspense>{children}</Suspense>
          </main>
          <Suspense>
            <Foundation menus={settings.menus.footer} />
          </Suspense>
        </div>
      </body>
    </html>
  )
  return layout
}

显然，此布局将把 [slug] 布局视为嵌套布局。我的目标是为 [slug] 路由创建一个布局，以便我可以将 props 传递给该布局。我该如何解决这个问题？

Answer 1

页面和布局之间没有通信。

page.tsx 被渲染为布局的 children 组件。从这里

Unlike Pages, Layout components do not receive the searchParams prop. This is because a shared layout is not re-rendered during navigation which could lead to stale searchParams between navigations.

这是因为布局文件充当模板或结构框架，定义网站或 Web 应用程序内多个页面的整体结构、设计和元素排列。它不会重新渲染，因此即使用户导航到另一个页面，他们也始终可以在浏览器上看到布局组件。