如何在NextJS 13 App目录中排除特定页面继承上级布局？

利用Next.js的**路由组（Route Groups）**可以完美解决你的需求，不需要移动[itemId]的位置，也不会改变现有页面的URL路径：

具体步骤 #

1. 创建路由组文件夹：在app/view-all/目录下新建一个路由组，命名为(with-aside)（括号包裹的名称不会体现在最终URL中）。

2. 迁移目标页面：把需要共享Aside组件的文件/文件夹全部移到这个路由组内：

   • app/view-all/page.js → app/view-all/(with-aside)/page.js
   • app/view-all/clothes/ → app/view-all/(with-aside)/clothes/
   • app/view-all/accessories/ → app/view-all/(with-aside)/accessories/
   • app/view-all/bags/ → app/view-all/(with-aside)/bags/

3. 调整布局文件：

   • 将原来包含Aside组件的app/view-all/layout.js，移动到路由组内，路径改为app/view-all/(with-aside)/layout.js，这样路由组里的所有页面都会自动继承这个带Aside的布局。
   • 在app/view-all/根目录下新建一个基础布局文件layout.js，这个布局仅负责渲染子内容，不包含Aside：

     export default function ViewAllRootLayout({ children }) {
       return children;
     }
     

4. 保留[itemId]结构：app/view-all/[itemId]/文件夹保持不动，它会自动使用app/view-all/下的新基础布局，而不会继承路由组内的带Aside布局，同时该页面自身的layout.js可以正常嵌套在基础布局之上。

最终效果 #

• /view-all、/view-all/clothes、/view-all/accessories、/view-all/bags这些页面仍使用带Aside的布局，URL路径完全不变。
• /view-all/[itemId]页面使用自己的布局，且不会加载原有的Aside组件，位置也无需调整。

内容的提问来源于stack exchange，提问作者queercoded