NextJS中某些页面的不同布局

kq4fsx7k 于 2023-05-17 发布在其他

关注(0)|答案(1)|浏览(372)

我正在使用Next.js，我希望在我的应用程序的每个页面上都有一个页眉和页脚，除了登录页面。我已经在app目录中创建了一个layout.tsx文件，它可以很好地将布局应用到所有页面。但是，当我在Login目录中创建一个layout.tsx文件时，文件头消失了，但页脚仍然存在，并且我在水合时收到三个关于错误的警告。
我的LoginPage看起来像这样：

'use client'
import Image from 'next/image'
import LoginLayout from "./layout";
import { ReactNode } from 'react';

function Login() {
    const router = useRouter();

    function checkIfCredentialsAreValid() {

        router.push("/dashboard")

    }

    return (
        <main className="flex p-40 ms-8 justify-center place-items-center">
            <div>
                <Button color="dark" style={{ backgroundColor: "#333", color: "#fff" }} onClick={checkIfCredentialsAreValid}>
                    Anmelden
                </Button>
            </div>
        </main>
    );
}

Login.getLayout = function getLayout(page: ReactNode) {
    return <LoginLayout>{page}</LoginLayout>;
}

export default Login;

我的layout.tsx的代码是这样的：

import '../globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html >
  )
}

我的文件结构看起来有点像这样：

-app
 |-login
    |-layout.tsx
    |-page.tsx
  (other Pages after the same sceme)
  |-global.css
  |-layout.tsx
  |-page.tsx

我很感激任何关于如何正确地应用到所有页面的布局除了登录页面的帮助。

next.js

来源：https://stackoverflow.com/questions/76225105/different-layout-for-certain-pages-in-nextjs

1条答案

按热度按时间

1mrurvl11#

对于未来围绕此问题的所有人：

我只是将layout.tsx重命名为类似rootLayout.tsx的东西，所以nextJS忽略了它，然后我通过import RootLayout from '../rootLayout';将RootLayout导入到子页面，并在需要时实现根布局。因此，带有Header的页面的代码如下所示：

<RootLayout>
  <main>
    //Content
  </main>
</RootLayout>

如果你不想要布局，就不要使用RootLayout标签
这样，每次重新加载页面或转到另一个子页面时，都会重新呈现根布局。为了防止这种情况，只需像这样导入RootLayout：

import dynamic from 'next/dynamic';

const RootLayout = dynamic(
    () => import('../rootLayout'),
    { ssr: false }
);

赞(0）回复(0）举报 2023-05-17

我来回答

NextJS中某些页面的不同布局

1条答案

相关问题

热门标签

最新问答