使用layout.js next js在不同页面上添加不同的导航栏

Question

我的下一个 js 项目中有两个导航栏布局和十个页面。现在，我需要使用layout.js一次为五个页面设置导航栏一，为其余页面设置导航栏二。我怎样才能做到这一点。如果有人帮助我解决这个问题，我将非常感激。提前致谢。

NavbarOne.js

const NavbarOne = () => {
  return (
    <div>
      <h1>Navbar One</h1>
    </div>
  );
}

export default NavbarOne;

NavbarTwo.js

const NavbarTwo = () => {
  return (
    <div>
      <h1>Navbar Two</h1>
    </div>
  );
}

export default NavbarTwo;

布局.js

import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";


const Layout = ({ children }) => {
    return (
        <div>
            <NavbarOne />
            {/* <NavbarTwo /> */}
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

_app.js

import Layout from '../components/layout/Layout';
import '../styles/styles.scss'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp

更新

布局.js

import Footer from "../Footer";
import NavbarOne from "../Navbar/NavbarOne";
import NavbarTwo from "../Navbar/NavbarTwo";


const Layout = ({ children, criteria}) => {
    return (
        <div>
            { criteria ?
              <NavbarOne />
              :
              <NavbarTwo />
            }
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

__app.js

import Layout from '../components/layout/Layout';
import '../styles/styles.scss'

function MyApp({ Component, pageProps }) {
  return (
    <Layout criteria={true}>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp

__admission.js

import Layout from "../components/layout/Layout";

const admission = () => {
    return (
        <Layout criteria={false}>
            <div>
            <h1>Admission</h1>
        </div>
        </Layout>
    );
}

export default admission;

Answer 1

你可以做类似的事情

const Layout = ({ children, criteria }) => {
    return (
        <div>
            { criteria ? //ternary operator
              <NavbarOne />
              :
              <NavbarTwo />
            }
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

并将布尔值传递给您的布局作为在导航栏之间进行选择的标准

const Page1 = () => {
    return (
        <Layout criteria={true}> // will display navbar 1
          <p>Im page 1</p>
        </Layout>
    );
}

export default Layout;

const Page2 = () => {
    return (
        <Layout criteria={false}> // will display navbar 2
          <p>Im page 2</p>
        </Layout>
    );
}

export default Layout;

使用三个导航栏，您可以做到

const Layout = ({ children, navbarType }) => {
    return (
        <div>
            { navbarType == 1 &&  <NavbarOne />}
            { navbarType == 2 &&  <NavbarTwo />}
            { navbarType == 3 &&  <NavbarThree />}
            {children}
            <Footer />
        </div>
    );
}

export default Layout;

并将一个数字作为 navbarType 传递到您的布局以在导航栏之间进行选择

const Page1 = () => {
    return (
        <Layout navbarType={1}> // will display navbar 1
          <p>Im page 1</p>
        </Layout>
    );
}

export default Layout;

const Page2 = () => {
    return (
        <Layout navbarType={2}> // will display navbar 2
          <p>Im page 2</p>
        </Layout>
    );
}

export default Layout;

const Page3 = () => {
    return (
        <Layout navbarType={3}> // will display navbar 3
          <p>Im page 3</p>
        </Layout>
    );
}

export default Layout;