快速了解 Next.js 中的路由分组

我最近在处理 Next.js 项目时学到的最酷的事情之一就是路线分组。

这是一个简单但功能强大的功能，可让您组织相关路线而不影响 URL 结构。如果您尚未探索过此功能，请让我为您分解！

Next.js 中的路由组是什么？

可以将路由组视为一种为您的应用创建干净、结构化路由的方法，而不会使 URL 路径变得杂乱。您可以通过将文件夹括在“括号 ()”中来实现这一点。

假设您正在开发一个电子商务网站。您可能希望所有产品路由（如 `/products/shoes` 或 `/products/bags`）共享某些功能，但您不希望 URL 中显示 products 一词。

路线组可以轻松处理这个问题！

工作原理如下：

app/
  (products)/
    shoes/
      page.tsx → /shoes
    bags/
      page.tsx → /bags

我如何在我的项目中使用它

我在当前项目中创建了两个路由组：（auth）和（root）。

为什么要使用路线组？

我使用路由组来为应用程序的不同部分定义特定的布局，而无需重复代码。例如：

我如何实现它

步骤 1：创建路由组

我在 `app/` 目录中创建了两个文件夹：`(auth)` 和 `(root).`

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

**但首先从全局根布局中删除导航栏：**

这是应用程序的中心布局。

它将所有内容包装在主题提供程序中，以便主题切换等功能可以在所有页面上无缝运行。它处理应用程序的元数据和全局上下文，确保主题切换器影响所有页面。

**（根）“组”布局（实际根布局）：**包括导航栏，以在主页和其他主要路线上保持不变。

步骤 3：构建（auth）布局和页面：

不包括导航栏，但提供专门用于身份验证页面的布局。

在 (auth) 内部，我创建了两个文件夹：“sign-in”和“sign-up”。每个文件夹包含：

用于相应页面内容的 `page.tsx` 文件。

(auth) 布局将它们包装起来，确保两个页面共享一个共同的结构。

为什么这很重要

**嗯，有三个原因：**

总结

如果您正在构建 Next.js 项目，那么路由分组值得一试。它们非常适合动态处理布局，同时保持路由整洁有序。

无论是构建主页、身份验证流程，甚至是管理仪表板，路线组都允许您创建符合您的设计需求的布局。