我已经在所有的页面上渲染了页眉和页脚，但是对于我的几个页面，我不想要它们。这是我的layout。js。谢谢。
*
import React from "react";
import NavBar from "./NavBar";
import Notify from "./Notify";
import Modal from "./Modal";
import Footer from "./Footer";
function Layout({ children }) {
return (
<div>
<NavBar />
<Notify />
<Modal />
{children}
<Footer />
</div>
);
}
export default Layout;
和_app.js
*
*import "../styles/globals.scss";
import Layout from "../components/Layout";
import { DataProvider } from "../store/GlobalState";
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<DataProvider>
<Layout>
<Head>
<link rel="icon" href="/favicon.png" />
</Head>
<Component {...pageProps} />
</Layout>
</DataProvider>
);
}
export default MyApp;*
function Layout({ children, isLogin }) {
return (
<div>
{isLogin && <NavBar />}
<Notify />
<Modal />
{children}
{isLogin && <Footer />}
</div>
);
}
export default Layout;
如果isLogin为真，它将返回导航栏和页脚组件，如果isLogin为假，它将返回null。
只需将isLogin替换为用于标识用户是否登录的变量…
我们可以取另一个authPageprop到Layout组件。初始化false值为默认值
function Layout({ children, authPage = false }) {
return (
<div>
{!authPage && <NavBar />}
<Notify />
<Modal />
{children}
{!authPage && <Footer />}
</div>
);
}
然后在签名/注册页面，你可以像这样渲染它:
<Layout authPage = {true}>
....
</Layout>
其他所有页面:
<Layout>
....
</Layout>
你可以在这里查看实现