英文:
app router next js avoid the default layout and use our own page layout?
问题
我在layout.jsx中使用了默认的布局，并将所有其他页面作为props传递给它们，
在页面路由器中，我们可以配置路由器路径来定义应该使用哪个布局，但在这个新系统中，我不知道如何编码它。
import "./globals.css";
import Header from "./components/Header";
import { Inter, Poppins } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
const poppins = Poppins({
weight: ["400", "700"],
subsets: ["latin"],
});
export const metadata = {
title: "Weather app",
description: "Author Sayeed Mahdi Mousavi",
keywords: "weather, teather",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={poppins.className}>
<Header />
{children}
</body>
</html>
);
}
此外，我还为我的天气应用程序创建了另一个布局。下面的布局位于我的weather app文件夹中，名称为layout.jsx。
import LayoutTailwind from "../components/LayoutTailwind";
const Layout = ({ children }) => {
return (
<>
<LayoutTailwind />
{children}
</>
);
}
export default Layout;
希望这些代码部分对你有所帮助。
英文:
I used a default layout in layout.jsx and as props, I passed all my other pages as children,
in page router, we could config router path to define which layout should be used but in this new system, I don't know how to code it.
import "./globals.css"
import Header from "./components/Header"
import { Inter, Poppins } from "next/font/google"
const inter = Inter({ subsets: ["latin"] })
const poppins = Poppins({
weight: ["400", "700"],
subsets: ["latin"],
})
export const metadata = {
title: "Weather app",
description: "Author Sayeed Mahdi Mousavi",
keywords: "weather, teather",
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={poppins.className}>
<Header />
{children}
</body>
</html>
)
}
also, I have another layout for my weather app layout. the below layout is in my weather app folder with the name of the layout.jsx.
import LayoutTailwind from "../components/LayoutTailwind"
const Layout = ({ children }) => {
return (
<>
<LayoutTailwind />
{children}
</>
)
}
export default Layout
答案1
得分: 1
我理解你的问题是你需要在应用的不同页面使用不同的布局。是这样吗？要做到这一点，你可以删除你的 app.js 布局文件，然后只需在所有其他路由文件夹中添加 layout.jsx。
请仔细阅读此文档链接以获取进一步的说明：https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
谢谢！希望我能帮助你。
英文:
What I understood from your question is that you need different Layouts for different pages in your app. Is that correct? To do so what you can do is remove your app.js Layout file and just add layout.jsx in all your other route folders.
Carefully read this doc link for further clarification: https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
Thank you! Hope I was able to help.
答案2
得分: 0
我发现的解决方案是，我们可以为不同的页面创建布局，然后为每个页面添加我们的设计和内容。
export default function Categories() {
return (
<>
<Sidebar />
<div className="lg:pl-72">
<Header />
<main className="py-10">
<div className="px-4 sm:px-6 lg:px-8">
<div className="px-4 sm:px-6 lg:px-8">
<CategoryForm />
<CategoryTable />
</div>
</div>
</main>
</div>
</>
);
}
和这个页面：
import Header from "@/components/Header";
import Sidebar from "@/components/Sidebar";
export default function Home() {
return (
<>
<Sidebar />
<div className="lg:pl-72">
<Header />
<main className="py-10">
<div className="px-4 sm:px-6 lg:px-8">
<p>Your content goes here</p>
</div>
</main>
</div>
</>
);
}
不，我们可以在不同的页面上使用我们的布局。
英文:
as I found the solution was that, we can make a layout for different pages then for each we add our design and content.
export default function Categories() {
return (
<>
<Sidebar />
<div className="lg:pl-72">
<Header />
<main className="py-10">
<div className="px-4 sm:px-6 lg:px-8">
<div className="px-4 sm:px-6 lg:px-8">
<CategoryForm />
<CategoryTable />
</div>
</div>
</main>
</div>
</>
)
}
and this page
import Header from "@/components/Header"
import Sidebar from "@/components/Sidebar"
export default function Home() {
return (
<>
<Sidebar />
<div className="lg:pl-72">
<Header />
<main className="py-10">
<div className="px-4 sm:px-6 lg:px-8">
<p>Your content goes here</p>
</div>
</main>
</div>
</>
)
}
No, we can have our layout on different pages.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论