Reactjs 如何在一个 Next.js 项目中使用两种布局

发布于08月09日

我做了一个博客项目，所以我想要一个管理小组.我不想在我的管理区使用全局布局.如何在一个项目中使用两个布局？

我试图在_app.tsx中进行条件调用，但我无法在"Component"中创建循环.

推荐答案

由于您使用的是pages文件夹，因此可以使用Next.js所说的Per-Page Layouts.由于大多数页面将使用全局Layout，因此您可以为您的管理员执行以下操作:

// pages/admin/index.js

import AdminLayout from "./_layout";

export default function Page() {
  return <></>;
}

Page.getLayout = function getLayout(page) {
  return <AdminLayout>{page}</AdminLayout>;
};

// pages/_app.js

import Layout from "./_layout";

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout;
  if (getLayout) {
    return getLayout(<Component {...pageProps} />);
  }

  // Otherwise use the global Layout
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

而对于future 使用app目录的人来说，这thread将会有所帮助.