首页 > web前端 > js教程 > 快速深入了解 Next.js 中的路由分组

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

Patricia Arquette
发布: 2024-12-26 15:12:14
原创
822 人浏览过

我最近在 Next.js 项目中学到的最酷的事情之一就是路由分组。

这是一个简单但强大的功能,可让您组织相关路由而不影响 URL 结构。如果你还没有探索过这一点,让我为你分解一下!

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

将路由组视为一种为应用程序创建干净、结构化路由而不会使 URL 路径混乱的方法。您可以通过将文件夹括在括号 () 中来完成此操作。

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

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

工作原理如下:

app/
  (products)/
    shoes/
      page.tsx → /shoes
    bags/
      page.tsx → /bags
登录后复制

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

我在当前项目中创建了两个路由组:(auth) 和 (root)。

  • (auth) 组 处理与身份验证相关的页面,例如登录和注册。
  • (根)组 组织导航栏需要保留的页面,例如主页。

为什么使用路由组?

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

  • 我不希望导航栏出现在我的登录和注册页面上。
  • 我需要主页上的导航栏,但我也希望整个应用程序有一个一致的主题。 路由组帮助我在不触及 URL 路径的情况下实现了这一目标。

我是如何实现的

第 1 步:创建路由组

A Quick Dive Into Route Groupings in Next.js
我在 app/ 目录中创建了两个文件夹:(auth) 和 (root)。

  1. app/(auth)/ 文件夹:

    • 包含登录和注册页面。
    • 从布局中排除导航栏。
  2. _app/(root)/_ 文件夹:

  • 包括导航栏组件,以确保其位于主页和其他相关页面上。

第 2 步:定义每个路由组的布局

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

A Quick Dive Into Route Groupings in Next.js
这是应用程序的中心布局。

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

(根)“组”布局(实际的根布局): 包括在主页和其他主要路线上持续存在的导航栏。

A Quick Dive Into Route Groupings in Next.js

第 3 步:构建(auth)布局和页面:

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

在 (auth) 中,我创建了两个文件夹:登录和注册。每个文件夹都包含:
A Quick Dive Into Route Groupings in Next.js

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

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

为什么这很重要

嗯,有三个原因:

  1. 我避免在多个文件中重复布局。
  2. 我保持应用程序的 URL 路径干净且用户友好。从下面的例子来看,我不需要写http://localhost:3001/auth/Sign-in A Quick Dive Into Route Groupings in Next.js
  3. 我确保应用程序的每个部分都有自己定制的布局,而不影响全局设计。主页仍然有导航栏,而身份验证页面没有。

A Quick Dive Into Route Groupings in Next.js

外卖

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

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

以上是快速深入了解 Next.js 中的路由分组的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板