尧图网站建设 
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本篇指南聚焦 Next.js App Router 中的「路由组Route Groups」机制讲解如何利用名称带圆括号的目录如(symbols)在文件系统中按业务维度整理页面同时保证这些目录名称不会出现在最终 URL 路径里。读完本文你将掌握路由组的创建方法、目录组织技巧、布局隔离用法以及使用时的冲突限制并能直接迁移到自己的 Next.js 项目中。什么是路由组目录名带圆括号即可生效在 Next.js App Router 中路由组Route Groups是一个名称被一对圆括号包裹的目录例如(symbols)、(marketing)、(shop)。App Router 在解析路由时会完全忽略括号内的这一段目录名也就是说目录app/(symbols)/ampersand/page.tsx对应的路由是/ampersand而不是/symbols/ampersand路由组只影响文件系统中的组织方式不影响 URL 的路径结构。这正是它区别于普通嵌套目录的核心普通目录层级会一比一映射到 URL 路径而路由组是只见于磁盘、不见于 URL的纯组织层。实战案例Ruby Operator Lookup 项目中的(symbols)路由组原文档给出了一个非常直观的真实案例作者在 Ruby Operator Lookup 项目中将几十个 Ruby 运算符与符号ampersand、asterisk、backtick、underscore……统一收纳在一个(symbols)目录下目录结构如下$ exa --true src/app/ruby-operators src/app/ruby-operators ├── (symbols) │ ├── ampersand │ │ └── page.mdx │ ├── arbitrary-keyword-arguments │ │ └── page.mdx │ ├── asterisk │ │ └── page.mdx │ ├── at-symbol │ │ └── page.mdx │ ├── backtick │ │ └── page.mdx │ ├── ... │ └── underscore │ └── page.mdx ├── client-layout.tsx ├── layout.tsx ├── page.tsx └── wrapper.ts这个结构的关键点在于(symbols)是纯组织目录它把所有运算符相关页面聚合到一起开发时无需在几十个平行目录间来回翻找目录下每个子目录如ampersand/、asterisk/各自包含一个page.mdx形成独立的可访问页面client-layout.tsx、layout.tsx、page.tsx、wrapper.ts这些共享文件仍然放在src/app/ruby-operators的顶层与路由组目录平级不会被卷入(symbols)内部。这种共享文件在外、同类页面分组在内的排布让项目既能集中管理大量同质页面又能让布局、包装器等公共代码保持单一来源。效果验证URL 路径完全不受目录名影响虽然(symbols)在文件系统中多了一层目录但 App Router 在生成路由时会跳过这一段。因此最终路由仍然让每个符号直接挂在/ruby-operators/之下/ruby-operators/ampersand/ruby-operators/asterisk/ruby-operators/backtick……也就是说文件系统里多套了一层(symbols)URL 里却一分一毫都不多。你既享受了分组带来的开发便利又没有给用户留下更难记的深层嵌套链接也不会破坏已经对外发布过的 URL。对于一个有几十个同类页面的站点这一点对 SEO 和链接稳定性都很有价值。原理为什么括号目录名不参与路由解析从 App Router 的路由解析规则看路由的生成依据是目录与文件之间的层级关系每个包含page文件或route文件的路径段都会对应一个 URL 段。而由圆括号包裹的路径段被路由器视为仅用于分组的标记会被直接跳过不参与 URL 段的拼接。这带来的直接推论是路由组的名字本身是自由命名的——(symbols)、(ops)、(marketing)都可以只要不改变组内文件与page文件的相对层级最终 URL 就完全一致。你可以随时重命名路由组目录例如把(symbols)改成(ruby-symbols)而不必担心任何 URL 或外链失效因为路由组名称从来不会进入 URL。命令行创建路由组目录注意括号的转义创建路由组目录和创建普通目录唯一的区别就是名称里的圆括号在 shell 中有特殊含义在 zsh 中圆括号是 glob 运算符。直接执行下面的命令可能报错$ mkdir src/app/ruby-operators/(symbols)需要给目录名加引号或用反斜杠转义$ mkdir src/app/ruby-operators/(symbols) # 或者 $ mkdir src/app/ruby-operators/\(symbols\)这与仓库中另一篇 TIL 记录的问题同源在 Create Files And Directories For Dynamic Routes 中动态路由目录pages/posts/[slug].js同样因为方括号是 zsh 的 glob 运算符而需要转义为pages/posts/\[slug\].js。圆括号、方括号这类特殊字符在 shell 中都必须显式转义或加引号否则会被解释为通配/分组语法。路由组的典型用途组织页面与隔离布局除了同类页面集中管理如上述运算符案例路由组在 App Router 项目中还有两个高频用法1. 按业务区块组织路由避免 URL 层级冗余例如可以把登录、注册、找回密码这类认证页面全部放入(auth)把商品、购物车、结算放入(shop)而最终 URL 依然是干净的/login、/products、/cart不会出现/auth/login这类多余的中间路径段。2. 在路由组内放置自己的layout.tsx实现同段多布局路由组可以拥有独立的layout.tsx放在组内的布局只对组内的路由生效。因此你可以在同一 URL 层级下为不同分组提供不同的 UI 框架——例如(marketing)/layout.tsx提供宣传页的顶部横幅布局(app)/layout.tsx提供登录后的侧边栏布局二者共享父级布局的同时互不干扰。这正是官方将路由组定位为组织路由、分隔布局两大场景的底层原因。使用注意与限制避免同段多组冲突正因为路由组名称不参与 URL 生成使用时就有一个必须遵守的限制同一层级下的多个路由组如果各自组内的page文件解析出相同的 URL 段就会产生冲突。例如下面这种结构src/app ├── (marketing) │ └── page.tsx # 解析为 / └── (shop) └── page.tsx # 也解析为 /(marketing)/page.tsx与(shop)/page.tsx都会映射到根路径/App Router 无法确定该把哪个页面作为/的响应构建或访问时会出现路由冲突。规划路由组时应确保同一层级下各组解析出的 URL 段互不重叠如果只是想给根路径换布局更稳妥的做法是让其中一个分组持有实际页面另一个分组只放布局与共享组件而不是两个组各自都放page.tsx。与本仓库其他 Next.js TIL 的关联路由组是 App Router 路由体系的一部分和本仓库nextjs/分类下的几篇 TIL 相互呼应Create Files And Directories For Dynamic Routes动态路由使用[slug]方括号目录路由组使用(group)圆括号目录——两者都是不进入 URL 的目录标记并且同样需要在 shell 中转义特殊字符Match Middleware On Groups Of Paths中间件通过matcher按最终 URL 路径匹配不关心文件系统里是否存在路由组目录因此/(symbols)下的页面在中间件眼中就是/ruby-operators/ampersandAvoid Conflicting Files冲突文件如welcome.tsx与welcome/index.tsx会让 Next.js 开发服务器报出难以理解的错误这与多个路由组解析到同一 URL 段属于同一类问题——理解文件系统路径 ≠ 最终 URL是排查此类问题的关键。综上路由组是 App Router 中低成本整理、零 URL 副作用的组织工具用括号目录归拢页面、用组内布局隔离 UI同时牢记同段冲突限制即可在保持 URL 结构与对外链接稳定的前提下让大型 Next.js 项目的目录井井有条。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐Next.js项目中使用路由组(Route Groups)组织页面结构Next.js项目中使用路由组 Route Groups 组织页面结构 什么是路由组 在Next.js的App Router架构中路由组 Route Grou文档教程知识库Buzz 离线音频转录指南本地三步出结果声音数据不出你的电脑Buzz 离线音频转录指南本地三步出结果声音数据不出你的电脑 Buzz 是一款在你个人电脑上离线完成音频转录和翻译的开源桌面工具由 OpenAI 的 Wh人工智能语音音频本地部署桌面应用Meteor 应用 URL 路由实战基于 Flow Router Extra 的客户端路由、Blaze 页面渲染与按路由动态加载Meteor 应用 URL 路由实战基于 Flow Router Extra 的客户端路由、Blaze 页面渲染与按路由动态加载 本指南以 Meteor 官方后端前端开发工具移动开发上一篇轻量级WebDAV服务器 - hacdias/webdav下一篇HelloSilicon 最佳实践总结20个编写高质量 ARM64 汇编代码的核心原则创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Next.js App Router 路由组（Route Groups）实战：用括号目录整理页面且不改动 URL 路径
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本篇指南聚焦 Next.js App Router 中的「路由组Route Groups」机制讲解如何利用名称带圆括号的目录如(symbols)在文件系统中按业务维度整理页面同时保证这些目录名称不会出现在最终 URL 路径里。读完本文你将掌握路由组的创建方法、目录组织技巧、布局隔离用法以及使用时的冲突限制并能直接迁移到自己的 Next.js 项目中。什么是路由组目录名带圆括号即可生效在 Next.js App Router 中路由组Route Groups是一个名称被一对圆括号包裹的目录例如(symbols)、(marketing)、(shop)。App Router 在解析路由时会完全忽略括号内的这一段目录名也就是说目录app/(symbols)/ampersand/page.tsx对应的路由是/ampersand而不是/symbols/ampersand路由组只影响文件系统中的组织方式不影响 URL 的路径结构。这正是它区别于普通嵌套目录的核心普通目录层级会一比一映射到 URL 路径而路由组是只见于磁盘、不见于 URL的纯组织层。实战案例Ruby Operator Lookup 项目中的(symbols)路由组原文档给出了一个非常直观的真实案例作者在 Ruby Operator Lookup 项目中将几十个 Ruby 运算符与符号ampersand、asterisk、backtick、underscore……统一收纳在一个(symbols)目录下目录结构如下$ exa --true src/app/ruby-operators src/app/ruby-operators ├── (symbols) │ ├── ampersand │ │ └── page.mdx │ ├── arbitrary-keyword-arguments │ │ └── page.mdx │ ├── asterisk │ │ └── page.mdx │ ├── at-symbol │ │ └── page.mdx │ ├── backtick │ │ └── page.mdx │ ├── ... │ └── underscore │ └── page.mdx ├── client-layout.tsx ├── layout.tsx ├── page.tsx └── wrapper.ts这个结构的关键点在于(symbols)是纯组织目录它把所有运算符相关页面聚合到一起开发时无需在几十个平行目录间来回翻找目录下每个子目录如ampersand/、asterisk/各自包含一个page.mdx形成独立的可访问页面client-layout.tsx、layout.tsx、page.tsx、wrapper.ts这些共享文件仍然放在src/app/ruby-operators的顶层与路由组目录平级不会被卷入(symbols)内部。这种共享文件在外、同类页面分组在内的排布让项目既能集中管理大量同质页面又能让布局、包装器等公共代码保持单一来源。效果验证URL 路径完全不受目录名影响虽然(symbols)在文件系统中多了一层目录但 App Router 在生成路由时会跳过这一段。因此最终路由仍然让每个符号直接挂在/ruby-operators/之下/ruby-operators/ampersand/ruby-operators/asterisk/ruby-operators/backtick……也就是说文件系统里多套了一层(symbols)URL 里却一分一毫都不多。你既享受了分组带来的开发便利又没有给用户留下更难记的深层嵌套链接也不会破坏已经对外发布过的 URL。对于一个有几十个同类页面的站点这一点对 SEO 和链接稳定性都很有价值。原理为什么括号目录名不参与路由解析从 App Router 的路由解析规则看路由的生成依据是目录与文件之间的层级关系每个包含page文件或route文件的路径段都会对应一个 URL 段。而由圆括号包裹的路径段被路由器视为仅用于分组的标记会被直接跳过不参与 URL 段的拼接。这带来的直接推论是路由组的名字本身是自由命名的——(symbols)、(ops)、(marketing)都可以只要不改变组内文件与page文件的相对层级最终 URL 就完全一致。你可以随时重命名路由组目录例如把(symbols)改成(ruby-symbols)而不必担心任何 URL 或外链失效因为路由组名称从来不会进入 URL。命令行创建路由组目录注意括号的转义创建路由组目录和创建普通目录唯一的区别就是名称里的圆括号在 shell 中有特殊含义在 zsh 中圆括号是 glob 运算符。直接执行下面的命令可能报错$ mkdir src/app/ruby-operators/(symbols)需要给目录名加引号或用反斜杠转义$ mkdir src/app/ruby-operators/(symbols) # 或者 $ mkdir src/app/ruby-operators/\(symbols\)这与仓库中另一篇 TIL 记录的问题同源在 Create Files And Directories For Dynamic Routes 中动态路由目录pages/posts/[slug].js同样因为方括号是 zsh 的 glob 运算符而需要转义为pages/posts/\[slug\].js。圆括号、方括号这类特殊字符在 shell 中都必须显式转义或加引号否则会被解释为通配/分组语法。路由组的典型用途组织页面与隔离布局除了同类页面集中管理如上述运算符案例路由组在 App Router 项目中还有两个高频用法1. 按业务区块组织路由避免 URL 层级冗余例如可以把登录、注册、找回密码这类认证页面全部放入(auth)把商品、购物车、结算放入(shop)而最终 URL 依然是干净的/login、/products、/cart不会出现/auth/login这类多余的中间路径段。2. 在路由组内放置自己的layout.tsx实现同段多布局路由组可以拥有独立的layout.tsx放在组内的布局只对组内的路由生效。因此你可以在同一 URL 层级下为不同分组提供不同的 UI 框架——例如(marketing)/layout.tsx提供宣传页的顶部横幅布局(app)/layout.tsx提供登录后的侧边栏布局二者共享父级布局的同时互不干扰。这正是官方将路由组定位为组织路由、分隔布局两大场景的底层原因。使用注意与限制避免同段多组冲突正因为路由组名称不参与 URL 生成使用时就有一个必须遵守的限制同一层级下的多个路由组如果各自组内的page文件解析出相同的 URL 段就会产生冲突。例如下面这种结构src/app ├── (marketing) │ └── page.tsx # 解析为 / └── (shop) └── page.tsx # 也解析为 /(marketing)/page.tsx与(shop)/page.tsx都会映射到根路径/App Router 无法确定该把哪个页面作为/的响应构建或访问时会出现路由冲突。规划路由组时应确保同一层级下各组解析出的 URL 段互不重叠如果只是想给根路径换布局更稳妥的做法是让其中一个分组持有实际页面另一个分组只放布局与共享组件而不是两个组各自都放page.tsx。与本仓库其他 Next.js TIL 的关联路由组是 App Router 路由体系的一部分和本仓库nextjs/分类下的几篇 TIL 相互呼应Create Files And Directories For Dynamic Routes动态路由使用[slug]方括号目录路由组使用(group)圆括号目录——两者都是不进入 URL 的目录标记并且同样需要在 shell 中转义特殊字符Match Middleware On Groups Of Paths中间件通过matcher按最终 URL 路径匹配不关心文件系统里是否存在路由组目录因此/(symbols)下的页面在中间件眼中就是/ruby-operators/ampersandAvoid Conflicting Files冲突文件如welcome.tsx与welcome/index.tsx会让 Next.js 开发服务器报出难以理解的错误这与多个路由组解析到同一 URL 段属于同一类问题——理解文件系统路径 ≠ 最终 URL是排查此类问题的关键。综上路由组是 App Router 中低成本整理、零 URL 副作用的组织工具用括号目录归拢页面、用组内布局隔离 UI同时牢记同段冲突限制即可在保持 URL 结构与对外链接稳定的前提下让大型 Next.js 项目的目录井井有条。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐Next.js项目中使用路由组(Route Groups)组织页面结构Next.js项目中使用路由组 Route Groups 组织页面结构 什么是路由组 在Next.js的App Router架构中路由组 Route Grou文档教程知识库Buzz 离线音频转录指南本地三步出结果声音数据不出你的电脑Buzz 离线音频转录指南本地三步出结果声音数据不出你的电脑 Buzz 是一款在你个人电脑上离线完成音频转录和翻译的开源桌面工具由 OpenAI 的 Wh人工智能语音音频本地部署桌面应用Meteor 应用 URL 路由实战基于 Flow Router Extra 的客户端路由、Blaze 页面渲染与按路由动态加载Meteor 应用 URL 路由实战基于 Flow Router Extra 的客户端路由、Blaze 页面渲染与按路由动态加载 本指南以 Meteor 官方后端前端开发工具移动开发上一篇轻量级WebDAV服务器 - hacdias/webdav下一篇HelloSilicon 最佳实践总结20个编写高质量 ARM64 汇编代码的核心原则创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考