Next.js 13 - 有不同的共享布局

Question

我现在想升级到 Next 13。我的投资组合上有不同的导航栏。如何为 /about 和 /skills 路线使用与主页和 /contact 路线不同的导航栏？

我认为您现在可以在应用程序目录中创建不同的子文件夹，每个子文件夹都包含layout.tsx文件，但随后会创建相应的不需要的路由。

我尝试了以下文件结构：

/app/LayoutOne/layout.tsx
/app/LayoutOne/page.tsx
/app/LayoutOne/contact/page.tsx
/app/LayoutTwo/layout.tsx
/app/LayoutTwo/about/page.tsx
/app/LayoutTwo/skills/page.tsx

但是后来我有以下路线：

../LayoutOne
../LayoutOne/contact
../LayoutTwo/about
../LayoutTwo/skills

我不想要 URL 中的布局部分

Answer 1

使用路由分组来避免这种行为。 路由系统会忽略括号中的文件夹名称。

试试这个：

/app/(LayoutOne)/layout.tsx
/app/(LayoutOne)/page.tsx
/app/(LayoutOne)/contact/page.tsx
/app/(LayoutTwo)/layout.tsx
/app/(LayoutTwo)/about/page.tsx
/app/(LayoutTwo)/skills/page.tsx

定义以下路线：

../
../contact
../about
../skills

Answer 2

Next.js 有两种布局。 “根”和“常规”。 来自文档

根布局：您可以创建一个适用于所有路线的根布局 通过在应用程序文件夹中添加layout.js 文件来创建应用程序。 根布局取代了对自定义应用程序 (_app.js) 的需求，并且 自定义文档（_document.js），因为它适用于所有路线。

常规布局：您还可以创建仅适用于 通过在特定的内部添加layout.js文件来成为应用程序的一部分 文件夹。

例如，您可以在“about”文件夹中创建一个layout.js文件，该文件仅适用于“about”中的路线段。

• 如果您想对多于 1 条路线使用一种布局，您可以将它们分组。

可以通过将文件夹名称包裹起来来创建路由组 括号：（文件夹名称）

注意：路由组的命名仅 用于组织目的，因为它们不会影响 URL 路径。

• 另一种方法是创建一个自定义

  BasePage

  组件并用 BasePage 包装每个页面。因为在你的问题中你只想使用两个不同的导航栏。但是，如果某些页面根本不需要导航栏怎么办？例如 https://codesandbox.io/ 主页有导航栏，但代码游乐场页面没有导航栏。或者也许您需要为不同的页面使用不同的背景颜色。在每种情况下，您只需将一个 prop 传递给包装器“BasePage”并处理内部逻辑。全局布局文件的作用只是应用顶级 CSS 规则或媒体规则。