Next.js条件布局
Next.js条件布局
提问于 2021-09-29 17:31:37
我已将_app.js更改为加载布局，具体取决于加载的页面。所有这些都可以在开发模式下很好地工作，但是一旦我创建了构建，它就无法获得"Component.name“并返回空值。有什么建议吗？
我的_app.js
import "../styles/globals.css";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
switch (Component.name) {
case "Home":
return <Component {...pageProps} />;
default:
return (
<Layout>
<Component {...pageProps} />{" "}
</Layout>
);
}
}
export default MyApp;Stack Overflow用户
回答已采纳
发布于 2021-09-29 17:38:44
name是空的，因为代码细化删除了这个值或混淆了它们，所以您不应该依赖于类或函数的名称。
每页版面请遵循这份官方指南
基本上，您可以为每个页面创建getLayout函数，这个函数应该返回布局：
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
export default function Page() {
return {
/** Your content */
}
}
Page.getLayout = function getLayout(page) {
return (
<Layout>
<NestedLayout>{page}</NestedLayout>
</Layout>
)
}在_app中，可以这样使用它：
export default function MyApp({ Component, pageProps }) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout || ((page) => page)
return getLayout(<Component {...pageProps} />)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69381038
复制相关文章
相似问题
腾讯云开发者
