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 有两种布局。“根”和“正”。来自文档

\n

\n

根布局 : 您可以通过在应用程序文件夹中添加布局.js 文件来创建将应用于应用程序的所有路由的根布局。\n根布局取代了对自定义应用程序 (_app.js) 和自定义应用程序的需求。\n文档（_document.js），因为它适用于所有路由。

\n

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

\n

\n

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

\n

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

\n

\n

可以通过将文件夹\xe2\x80\x99s 名称括在括号中来创建路由组：(folderName)

\n

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

\n

\n

\n

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

\n