我有一个简单的下一个应用程序，其结构如下
app(dir)
page.js
layout.js
student(dir)
--page.js
在此考虑layout.js包含
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 RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
并且应用程序page.js包含
export default function Page() {
return <h1>Hello, from app page</h1>;
}
` 和学生page.js包含
export default function Page() {
return <h1>Hello, Student</h1>;
}
现在在这个 ->当我导航到 localhost:3000 时它显示 您好，来自应用程序页面 ->>当我导航到 localhost:3000/student 时它显示 同学你好
在此我需要在 locahost:3000/student 中显示应用程序目录 page.js 内容 像这样：
Hello, from app page
Hello, student
我可以在应用程序目录中的layout.js中定义它并实现这一点，但是当我在localhost:3000时它会显示
Hello, from app page
Hello, from app page
两次
我需要检查吗 我知道我错过了一些东西，但我无法弄清楚 或者我是否需要检查用户何时位于 localhost:3000 并添加一个 if 条件来实现这一点
问题：
如何在学生页面中更改布局（导航栏）
原因： 根布局嵌套所有其他布局（这是正确的，并且是预期的行为）。
可能的解决方案：
这是我编写的一个小代码，当主页上的用户看到主页导航栏时，当用户在学生页面上看到学生导航栏时。
文件夹结构：
src
└── app
├── (home) // route group - to keep home related pages together
│ ├── about
│ │ └── page.js // just for example
│ ├── layout.js // home layout
│ └── page.js // home page
├── layout.js // root layout (required)
└── student
├── layout.js // student layout
└── page.js // student page
layout.jssrc\app\layout.jsimport { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<div>
Root Navbar
</div>
<main>{children}</main>
</body>
</html>
);
}
layout.jssrc\app\(home)\layout.jsimport Link from 'next/link'
export default function HomeLayout({
children,
}) {
return (
<section>
<div>
Homepage Navbar
<Link href={'/about'}>
About
</Link>
</div>
{children}
</section>
)
}
page.jssrc\app\(home)\page.jsimport Link from 'next/link'
export default async function Home() {
return (
<div>
<h3>Home Page</h3>
<Link href={'/student'}>
Go to students page
</Link>
</div>
);
}
学生：
layout.jssrc\app\student\layout.jsexport default function StudentLayout({
children,
}) {
return (
<section>
<div>
Student Navbar
</div>
{children}
</section>
)
}
page.jssrc\app\(home)\page.jsimport Link from 'next/link'
export default async function StudentPage() {
return (
<div>
<h3>Hello, from Student Page</h3>
<Link href={'/'}>
Go to Home page
</Link>
</div>
);
}
说明： 根导航栏将在所有页面（学生页面和家庭组页面）中可见，主页导航栏在家庭组页面中可见（也意味着在关于页面中），学生导航栏在学生页面中可见。
当您现在打开 http://localhost:3000/ （您不需要在 url 中传递路由组名称 nextjs 会忽略它）您将看到包含此内容的页面：
根导航栏 - 来自 src pp\layout.js 的layout.js
主页导航栏关于 - 来自 src pp(home)\layout.js 的layout.js
主页 - src pp(home)\page.js
转到学生页面 - src pp(home)\page.js
粗略图： 当你访问 http://localhost:3000 时：
<RootLayout>
RootNavbar
<HomeLayout>
HomeNavbar
{
Pages on route / are loaded in here
}
</HomeLayout>
</RootLayout>
现在，当您转到
http://localhost:3000/student根导航栏 - 来自 src pp\layout.js 的layout.js
学生导航栏 - 来自 src pp\student\layout.js 的layout.js
您好，来自学生页面 - src pp\student\page.js
转到主页 - src pp\student\page.js 在此输入代码
粗略图： 当您转到 http://localhost:3000/student 时：
<RootLayout>
RootNavbar
<StudentLayout>
HomeNavbar
{
Pages on /student are loaded in here ,
}
</StudentLayout>
</RootLayout>
根据您的用例，您可以删除根导航栏。
请阅读：
如果您有任何疑问，请发表评论（如果有必要我会更新答案）