Next.js 13:基于路由层次结构自定义Next.js布局

o8x7eapl  于 2023-08-04  发布在  其他
关注(0)|答案(4)|浏览(195)

我正在做一个Next.js 13项目,我有一个名为 problems/[slug] 的路由。在这个路由的第一层(例如,problems/react),我有一个侧边栏和一个内容部分,我使用layout.tsx显示。
但是,在路由的下一个嵌套层(例如,/problems/react/test-problem),我想使用不同的布局而不是原始的布局。有没有办法做到这一点?

**注意:**我正在寻找基于应用程序目录的方法

erhoui1w

erhoui1w1#

在Next.js 13中,您可以使用usePathname钩子来确定您所在的页面,然后逻辑地显示或隐藏它:
第一个月

np8igboo

np8igboo2#

您可以保持pages文件夹的结构如下所示

pages/
    problems/
      [slug]/
        - index.js      // will match for /problems/[:slug] 
        - [problem].js   // will match for /problems/[:slug]/[:problem]

字符串
如果你需要多个布局,你可以添加一个属性getLayout到你的页面,允许你为布局返回一个React组件。这允许您在每页的基础上定义布局。由于我们返回的是一个函数,如果需要,我们可以有复杂的嵌套布局。

// 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} />)
}


了解有关它的更多信息,请参阅Next.js文档here

44u64gxh

44u64gxh3#

参考我对这篇文章的评论,你想做的事情应该没有问题。
您可以创建一个名为<ParentLayout />的组件并将其用作problems/react的布局,并将另一个组件<ChildLayout />用于problems/react/test-problem
将适当的零部件导入到相应的文件中,并使用它们。

yruzcnhs

yruzcnhs4#

要使用基于应用程序目录的方法为Next.js 13项目的不同级别实现不同的布局,您可以按照您提供的博客文章中概述的步骤进行操作。以下是如何做到这一点的分步指南:
1.在不影响URL路径的情况下组织路由:创建一个组,将相关路由放在一起,而不影响URL路径。例如,您可以为“问题”部分创建一个组:

app
|-- (problems)
|   |-- [slug]
|   |   |-- layout.js
|   |   |-- index.js
|   |   |-- test-problem
|   |   |   |-- layout.js
|   |   |   |-- index.js
|   |   |   |-- other-components.js

字符串
在本例中,“problems”文件夹用圆括号括起来,表示它是一个路由组。“problems”文件夹中的“layout.js”文件将用作“problems”部分的布局。
1.创建多个根布局:如果您想为应用程序的不同部分创建多个根布局,您可以删除顶层的“layout.js”文件,并在每个路由组中添加“layout.js”文件。这对于创建具有完全不同的UI或体验的部分非常有用。
举例来说:

app
|-- (marketing)
|   |-- layout.js
|   |-- index.js
|   |-- about.js
|   |-- contact.js
|-- (shop)
|   |-- layout.js
|   |-- index.js
|   |-- products.js
|   |-- cart.js
|-- homepage.js


在本例中,我们有两个路由组,一个用于“marketing”部分,另一个用于“shop”部分。每个组都有自己的“layout.js”文件,为每个部分定义不同的根布局。
1.将特定段选择到布局中:要将特定管线选择到布局中,可以创建新的管线组,并将共享同一布局的管线移动到该组中。
例如,在“商店”部分中,您可以具有以下结构:

app
|-- (shop)
|   |-- layout.js
|   |-- index.js
|   |-- account.js
|   |-- cart.js
|   |-- checkout.js


在本例中,“account”和“cart”路由共享相同的布局,而“checkout”则不同。通过将“account”和“cart”组合在一起,您可以将“layout.js”仅应用于这些路由。
请记住,路由组中的路由不应解析为与其他路由相同的URL路径,因为路由组不会影响URL结构。
通过遵循这些约定并创建具有特定布局的路由组,您可以基于基于应用程序目录的方法为Next.js 13项目的不同级别实现不同的布局。这将帮助您有效地组织路由和项目文件,而不会影响URL结构。
您可以在此处阅读有关路由组的更多信息:https://nextjs.org/docs/app/building-your-application/routing/route-groups

相关问题