快速深入了解 Nextjs 中的路由分组

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) 两个文件夹：

1. app/(auth)/: 包含登录和注册页面，并排除导航栏。
2. app/(root)/: 包含导航栏组件，确保其显示在主页和其他相关页面上。

步骤 2：定义每个路由组的布局

首先，从全局根布局中移除导航栏：

这是应用程序的核心布局，负责处理主题切换、元数据和全局上下文。

然后，创建 (root) 组的布局，包含导航栏：

步骤 3：构建 (auth) 布局和页面

(auth) 布局不包含导航栏，提供专门用于身份验证页面的布局。

在 (auth) 文件夹下，创建登录和注册文件夹，每个文件夹包含 page.tsx 文件：

重要性

使用路由分组有三大优势：

1. 避免代码重复： 避免在多个文件中重复布局代码。
2. 保持 URL 清晰： URL 路径保持简洁，用户友好，例如无需 /auth/sign-in
3. 自定义布局： 确保应用程序的每个部分都有其自定义的布局，而不会影响全局设计。

总结

在 Next.js 项目中，路由分组是一个强大的功能，可以帮助您构建更清晰、更易于维护的应用程序。它有助于动态处理布局，同时保持 URL 结构简洁有序。 无论是构建主页、身份验证流程，还是管理面板，路由分组都能帮助您创建符合设计需求的布局。

以上就是快速深入了解 Nextjs 中的路由分组的详细内容，更多请关注php中文网其它相关文章！