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

【问题标题】：Next.js 13 - Have different shared layoutsNext.js 13 - 拥有不同的共享布局
【发布时间】：2022-11-03 05:24:08
【问题描述】：

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

我认为您现在可以在 app 目录中创建不同的子文件夹，每个子文件夹都有 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 中的布局部分

【问题讨论】：

尝试使用 Next.js rewrites 从 url 中剥离布局段以隐藏它。
@rantao 看起来像是较旧的 next.js 版本的解决方法，但我希望 next.js 13 有更方便的方法
在documentation 中找到了答案

标签： next.js

【解决方案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

【讨论】：