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;回答 2
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用户
发布于 2022-02-17 06:20:30
我们可以在这种情况下使用useRouter。就像我们创建404页面时，nextJs导航未知路径到404 As一样，我们可以利用这个特性。
//Layout.js
import Header from "./header.js"
import Footer from "./footer.js"
import Sidebar from "./Sidebar.js"
import { useRouter } from "next/router"
export default function Layout({ children }) {
const router = useRouter()
console.log("router", router)
if (router.route === "/404") {
return (
<>
<main>{children}</main>
</>
)
}
if(router.router === "/dashboard") {
return (
<Sidebar>{children}</Sidebar>
)
}
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
)
}//_app.js
<Component {...pageProps} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69381038
复制相关文章
相似问题
腾讯云开发者
