// pages/problems/[slug]/index.js
import StandardLayout from '../components/StandardLayout'
export default function ProblemMainPage() {
return (
/** Your content */
)
}
ProblemMainPage.getLayout = function getLayout(page) {
return (
<StandardLayout>
{page}
</StandardLayout>
)
}
// pages/problems/[slug]/[problem].js
import AnotherLayout from '../components/AnotherLayout'
export default function ProblemDetail() {
return (
/** Your content */
)
}
ProblemDetail.getLayout = function getLayout(page) {
return (
<AnotherLayout>
{page}
</AnotherLayout>
)
}
的数据 更新pages/_app.js文件
// pages/_app.js
export default function MyApp({ Component, pageProps }) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout || ((page) => page)
return getLayout(<Component {...pageProps} />)
}
4条答案
按热度按时间erhoui1w1#
在Next.js 13中,您可以使用usePathname钩子来确定您所在的页面,然后逻辑地显示或隐藏它:
第一个月
np8igboo2#
您可以保持pages文件夹的结构如下所示
字符串
如果你需要多个布局,你可以添加一个属性
getLayout
到你的页面,允许你为布局返回一个React组件。这允许您在每页的基础上定义布局。由于我们返回的是一个函数,如果需要,我们可以有复杂的嵌套布局。的数据
更新pages/_app.js文件
型
了解有关它的更多信息,请参阅Next.js文档here
44u64gxh3#
参考我对这篇文章的评论,你想做的事情应该没有问题。
您可以创建一个名为
<ParentLayout />
的组件并将其用作problems/react
的布局,并将另一个组件<ChildLayout />
用于problems/react/test-problem
。将适当的零部件导入到相应的文件中,并使用它们。
yruzcnhs4#
要使用基于应用程序目录的方法为Next.js 13项目的不同级别实现不同的布局,您可以按照您提供的博客文章中概述的步骤进行操作。以下是如何做到这一点的分步指南:
1.在不影响URL路径的情况下组织路由:创建一个组,将相关路由放在一起,而不影响URL路径。例如,您可以为“问题”部分创建一个组:
字符串
在本例中,“problems”文件夹用圆括号括起来,表示它是一个路由组。“problems”文件夹中的“layout.js”文件将用作“problems”部分的布局。
1.创建多个根布局:如果您想为应用程序的不同部分创建多个根布局,您可以删除顶层的“layout.js”文件,并在每个路由组中添加“layout.js”文件。这对于创建具有完全不同的UI或体验的部分非常有用。
举例来说:
型
在本例中,我们有两个路由组,一个用于“marketing”部分,另一个用于“shop”部分。每个组都有自己的“layout.js”文件,为每个部分定义不同的根布局。
1.将特定段选择到布局中:要将特定管线选择到布局中,可以创建新的管线组,并将共享同一布局的管线移动到该组中。
例如,在“商店”部分中,您可以具有以下结构:
型
在本例中,“account”和“cart”路由共享相同的布局,而“checkout”则不同。通过将“account”和“cart”组合在一起,您可以将“layout.js”仅应用于这些路由。
请记住,路由组中的路由不应解析为与其他路由相同的URL路径,因为路由组不会影响URL结构。
通过遵循这些约定并创建具有特定布局的路由组,您可以基于基于应用程序目录的方法为Next.js 13项目的不同级别实现不同的布局。这将帮助您有效地组织路由和项目文件,而不会影响URL结构。
您可以在此处阅读有关路由组的更多信息:https://nextjs.org/docs/app/building-your-application/routing/route-groups