我把我的博客切换到NextJS 13,使用新的文件夹结构,所以从_app.js和_document.js移动到单一的layout.js,并希望从父根布局访问儿童的数据
export default function RootLayout({ children }) {
const { title, description } = children.props
console.log(children.props)
return <>
<html lang="en">
<head>
<title>{title}</title>
</head>
<body>
{children}
</body>
</html>
</>
}
字符串
但是,在控制台我看到:“undefined”。
有没有一种方法可以访问儿童的数据,而无需在NextJS 13的布局和页面中获取它。
1条答案
按热度按时间jtjikinw1#
在Next.js 13中,新的基于文件的布局路由系统不允许您直接访问布局中的子组件的props。这是因为布局默认情况下是一个服务器组件,它不能访问其子级的props。
但是,您可以使用Next.js中内置的SEO支持来管理HTML元素,如和标签。下面是app/layout.tsx中的一个例子:
字符串
在本例中,Metadata对象用于定义HTML文档的标题和描述。此元数据可以在每个页面或布局中定义,并将应用于HTML文档的。
如果需要在布局和页面之间共享数据,则可能需要在更高级别获取数据,并将其作为props传递给布局和页面。或者,您可以使用Redux或Zustand这样的状态管理库在组件之间共享状态。