next.js 路由分组：构建更清晰、更结构化的应用程序
Next.js 的路由分组功能，让您能够组织相关的路由，而不会影响 URL 结构，从而构建更清晰、更结构化的应用程序。如果您尚未尝试过，本文将为您详细介绍。
什么是 Next.js 路由分组？
路由分组可让您创建干净、结构化的路由，避免 URL 路径过于复杂。通过将文件夹用括号 () 括起来即可实现。
例如，在一个电子商务网站中，产品相关的路由（例如 /shoes 或 /bags）可以共享某些功能，而无需在 URL 中显示 “products”。
工作原理
app/ (products)/ shoes/ page.tsx → /shoes bags/ page.tsx → /bags
如何在项目中使用路由分组
以下示例展示了如何使用 (auth) 和 (root) 两个路由分组：
(auth) 组： 处理身份验证相关的页面，例如登录和注册。(root) 组： 组织需要保留导航栏的页面，例如主页。
为什么使用路由分组？
使用路由分组可以为不同的应用程序部分定义特定布局，避免代码重复。例如：
登录和注册页面不需要导航栏。主页和其他主要页面需要导航栏，同时保持应用程序整体主题一致。路由分组可以有效解决这些问题，而无需修改 URL 路径。
实现步骤
步骤 1：创建路由组
在 app/ 目录下创建 (auth) 和 (root) 两个文件夹：
app/(auth)/: 包含登录和注册页面，并排除导航栏。app/(root)/: 包含导航栏组件，确保其显示在主页和其他相关页面上。
步骤 2：定义每个路由组的布局
首先，从全局根布局中移除导航栏：
这是应用程序的核心布局，负责处理主题切换、元数据和全局上下文。
然后，创建 (root) 组的布局，包含导航栏：
步骤 3：构建 (auth) 布局和页面
(auth) 布局不包含导航栏，提供专门用于身份验证页面的布局。
在 (auth) 文件夹下，创建登录和注册文件夹，每个文件夹包含 page.tsx 文件：
重要性
使用路由分组有三大优势：
避免代码重复： 避免在多个文件中重复布局代码。保持 URL 清晰： URL 路径保持简洁，用户友好，例如无需 /auth/sign-in 
自定义布局： 确保应用程序的每个部分都有其自定义的布局，而不会影响全局设计。
总结
在 Next.js 项目中，路由分组是一个强大的功能，可以帮助您构建更清晰、更易于维护的应用程序。它有助于动态处理布局，同时保持 URL 结构简洁有序。 无论是构建主页、身份验证流程，还是管理面板，路由分组都能帮助您创建符合设计需求的布局。
以上就是快速深入了解 Nextjs 中的路由分组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499993.html
微信扫一扫 
支付宝扫一扫 
