英文:
Different Layout for certain pages in NextJS
问题
Here's the translated code portion without additional content:
我正在使用 Next.js，我想在我的应用的每个页面上都有一个页眉和页脚，除了登录页面。我已经在应用目录中创建了一个 `layout.tsx` 文件，用于将布局应用于所有页面，这已经正常工作。然而，当我在登录目录中创建一个 `layout.tsx` 文件时，页眉消失了，但页脚仍然存在，而且我会收到三个有关在初始加载时出现的错误的警告。
我的登录页面如下所示：
```jsx
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
(其他页面按照相同的模式)
|-global.css
|-layout.tsx
|-page.tsx
我希望这有助于您正确将布局应用于除登录页面之外的所有页面。
英文:
I'm using Next.js and I want to have a header and a footer on every page of my app, except for the Login page. I've already created a layout.tsx file in the app directory, which works fine for applying the layout to all pages. However, when I create a layout.tsx file inside the Login directory, the header disappears but the footer remains, and I get three warnings about errors while hydrating.
My LoginPage looks like this:
'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;
The code for my layout.tsx is this:
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 >
)
}
And my File structure looks somewhat like this:
-app
|-login
|-layout.tsx
|-page.tsx
(other Pages after the same sceme)
|-global.css
|-layout.tsx
|-page.tsx
I'd appreciate any help on how to properly apply the layout to all pages except for the Login page.
答案1
得分: 1
以下是您要翻译的内容：
For everyone coming around this Issue in the future:
我只是将 layout.tsx 重命名为类似 rootLayout.tsx，这样 nextJS 就会忽略它，然后通过 import 'RootLayout from '../rootLayout'; 将 RootLayout 导入到子页面，只有在需要时才实现 Root Layout。所以带有标题的页面的代码如下：
<RootLayout>
<main>
//内容
</main>
</RootLayout>
如果您不想使用布局，只需不使用 RootLayout 标签
这样，每次重新加载页面或转到另一个子页面时，根布局都会被重新渲染。要防止这种情况，只需像这样导入 RootLayout：
import dynamic from 'next/dynamic';
const RootLayout = dynamic(
() => import('../rootLayout'),
{ ssr: false }
);
英文:
For everyone coming around this Issue in the future:
I just renamed the layout.tsx to something like rootLayout.tsx so nextJS ignores it, then I importet the RootLayout to the sub pages via import RootLayout from '../rootLayout'; and just implemented the Root Layout when I needed it. So the Code for the Page with a Header looks like this:
<RootLayout>
<main>
//Content
</main>
</RootLayout>
If you dont want the Layout, just dont use the RootLayout Tag
This way the Root Layout gets rerendered every Time you reload the Page or go to another SubPage. To prevent this, just import the RootLayout like this:
import dynamic from 'next/dynamic';
const RootLayout = dynamic(
() => import('../rootLayout'),
{ ssr: false }
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论