当前位置： 首页 > news >正文

Next.js - Route Groups（路由组）

news 2026/3/28 13:58:47

路由组的作用

在应用程序目录中，嵌套文件夹通常会映射到 URL 路径。不过，您可以将文件夹标记为路由组，以防止该文件夹包含在路由的 URL 路径中。
这样就可以在不影响 URL 路径结构的情况下，将路由段和项目文件组织到逻辑组中。

路由组使用场景

  • 按站点部分、意图或团队等将路由组织成组；
  • 在同一路由段级别中启用嵌套布局；
  • 在同一网段中创建多个嵌套布局，包括多个根布局；
  • 将布局添加到共同网段中的路线子集中；

规则

A route group can be created by wrapping a folder's name in parenthesis: (folderName)

用括号封装文件夹名称，即可创建路由组： (folderName)

例子

要在不影响 URL 的情况下组织路由，可创建一个组，将相关路由集中在一起。括号中的文件夹将从 URL 中省略（例如（marketing)）或（shop））。

 尽管(marketing) 和 （shop）中的路由共享相同的 URL 层次结构，但您可以通过在它们的文件夹中添加 layout.js 文件，为每个组创建不同的布局。

 

将特定路由选择到布局中

要将特定路由选择到布局中，请创建一个新的路由组（如 (shop），并将共享相同布局的路由移动到该组中（如account和cart）。组外的路线将不共享布局（如checkout）。

创建多个根布局


要创建多个根布局，可移除顶层的 layout.js 文件，并在每个路由组内添加一个 layout.js 文件。这对于将应用程序划分为具有完全不同用户界面或体验的部分非常有用。每个根布局都需要添加 <html> 和 <body> 标记。 

在上面的例子中，（marketing）和（shop）都有自己的根布局。

注意：

  1. 路由组的命名除了用于组织外，没有其他特殊意义。它们不会影响 URL 路径。
  2. 包含路由组的路由不应解析到与其他路由相同的 URL 路径。例如，由于路由组不影响 URL 结构，(marketing)/about/page.js 和 (shop)/about/page.js 将同时解析到 /about，并导致错误。
  3. 如果使用多个根布局而没有顶级 layout.js 文件，则应在其中一个路由组中定义主页.js 文件，例如：app/(marketing)/page.js。
  4. 跨多个根布局导航将导致整个页面加载（而不是客户端导航）。例如，从使用 app/(shop)/layout.js 的 /cart 导航到使用 app/(marketing)/layout.js 的 /blog 将导致全页面加载。这仅适用于多个根布局。 

相关文章：

Next.js - Route Groups（路由组）

路由组的作用 在应用程序目录中&#xff0c;嵌套文件夹通常会映射到 URL 路径。不过&#xff0c;您可以将文件夹标记为路由组&#xff0c;以防止该文件夹包含在路由的 URL 路径中。 这样就可以在不影响 URL 路径结构的情况下&#xff0c;将路由段和项目文件组织到逻辑组中。 …...

编程日记 2023/8/19 2:30:58

musl libc ldso 动态加载研究笔记：01

前言 musl 是一个轻量级的标准C库&#xff0c;建立在系统调用之上&#xff0c;可以认为是【用户态】的C 库&#xff0c;与 glibc 或者 uClibc 属于同一类。 基于 musl 的 gcc 工具链包括交叉编译工具链&#xff0c;可以用于编译 Linux 或者其他的操作系统&#xff0c;如当前 L…...

编程日记 2023/8/19 2:29:56

2023 年 4 款适用于安卓手机的最佳 PDF 转 Word 转换器

尝试在 Android 上将 PDF 文档转换为 Word 文件&#xff1f;好吧&#xff0c;您可能会发现要让它发挥作用几乎是不可能的&#xff0c;至少在没有任何额外工具的情况下是这样。Web 上有用于此类转换的选项&#xff0c;但本地不一定会发生任何情况&#xff08;可能除了一个应用程…...

编程日记 2023/8/19 2:28:53

前端:运用html+css+jquery.js实现截图游戏

前端:运用htmlcssjquery.js实现截图游戏 1. 前言2. 实现原理3. 参考代码和运行结果 1. 前言 最近在刷手机视频时&#xff0c;总是能刷到一个这样的视频&#xff0c;视频上是一个截图游戏&#xff0c;当图片上的某个片段正好在图片的正确位置时&#xff0c;暂停视频&#xff0c;…...

编程日记 2023/8/19 2:27:51

Maven之JDK编译问题

IDEA Maven 默认使用 JDK 1.5 编译问题 IDEA 在「调用」maven 时&#xff0c;IDEA 默认都会采用 JDK 1.5 编译&#xff0c;不管你安装的 JDK 版本是 JDK 7 还是 JDK 8 或者更高。这样一来非常不方便&#xff0c;尤其是时不时使用 JDK 7/8 的新特性时。如果使用新特性&#xff…...

编程日记 2023/8/19 2:26:50

开发测试框架一 - 创建springboot工程及基础操作

一、创建及运行方式 1. 从官网导入&#xff1a; 注意&#xff1a;由于我的java版本是1.8&#xff1b;所以选中了spring2.7.14&#xff1b;如果你的java版本是9及以上&#xff0c;选中spring3相关的同时Java 版本也要对应起来 2. 创建第一个get请求 创建Controller package及…...

编程日记 2023/8/19 2:25:48

【IMX6ULL驱动开发学习】08.马达驱动实战：驱动编写、手动注册平台设备和设备树添加节点信息

目录 一、使用设备树 1.1 修改设备树流程 二、手动创建平台设备 三、总结&#xff08;附驱动程序&#xff09; 前情提要&#xff1a;​​​​​​​【IMX6ULL驱动开发学习】07.驱动程序分离的思想之平台总线设备驱动模型和设备树_阿龙还在写代码的博客-CSDN博客 手动注册…...

编程日记 2023/8/19 2:24:47

直方图均衡化和自适应直方图均衡化

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 均衡化是数字图像处理中常用的一种技术&#xff0c;用于增强图像的视觉效果和对比度。&#xff0c;今天我们将实现对同一张图像的直方图均衡化和自适应直方图均衡化处理&#xff0c;学习一下两者的的基本原理和实现过程&a…...

编程日记 2023/8/19 2:23:46

京东门详一码多端探索与实践 | 京东云技术团队

本文主要讲述京东门详业务在支撑过程中遇到的困境&#xff0c;面对问题我们在效率提升、质量保障等方向的探索和实践&#xff0c;在此将实践过程中问题解决的思路和方案与大家一起分享&#xff0c;也希望能给大家带来一些新的启发 一、背景 1.1、京东门详介绍 1.1.1、京东门…...

编程日记 2023/8/19 2:22:44

数据挖掘 | 零代码采集房源数据，支持自动翻页、数据排重等

1 前言 城市规划、商业选址等应用场景中经常会对地区房价、地域价值进行数据分析&#xff0c;其中地区楼盘房价是分析数据中重要的信息参考点&#xff0c;一些互联网网站上汇聚了大量房源信息&#xff0c;通过收集此类数据&#xff0c;能够对地区房价的分析提供参考依据。 如何…...

编程日记 2023/8/19 2:20:37

迪米特法则

迪米特法则&#xff0c;也称为最少知识原则&#xff08;Law of Demeter&#xff09;&#xff0c;是面向对象设计中的一个原则&#xff0c;旨在降低对象之间的耦合性&#xff0c;提高系统的可维护性和可扩展性。该原则强调一个类不应该直接与其它不相关的类相互交互&#xff0c;…...

编程日记 2023/8/19 2:19:35

云积天赫｜AIGC+营销的排头兵

AIGC生成式人工智能&#xff0c;正逐渐成为人们关注的焦点。AIGC的出现&#xff0c;标志着人工智能已经进入了一个全新的时代。AIGC的出现&#xff0c;也为营销行业带来了新的活力。那么企业该怎么利用这次AIGC浪潮&#xff0c;成为AIGC营销的排头兵呢&#xff1f; 　　 　　“…...

编程日记 2023/8/19 2:17:29

Oracle 数据库备份

1、使用管理员账号创建对应的directory目录 登录数据库 sqlplus / as sysdba 创建directory create or replace directory dumpdir as F:\container; 2、给用户赋予使用该目录的权限 grant read,write on directory dumpdir to Scott; 查看创建的目录位置 select * fro…...

编程日记 2023/8/19 2:16:28

【C++】模板template

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ C       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0;️欢…...

编程日记 2023/8/19 2:15:26

智能工厂：适应不断变化的制造世界

制造业已经从过去传统的装配线工艺流程中走了很长一段路。随着技术的进步和工业 4.0 的兴起&#xff0c;制造业正在迅速发展&#xff0c;以满足现代世界不断变化的需求。近年来出现的一个关键概念就是“智能工厂”。在这篇文章中&#xff0c;我们将探讨什么是智能工厂、它是如何…...

编程日记 2023/8/19 2:14:25

大数据课程I3——Kafka的消息流与索引机制

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 掌握Kafka的消息流处理； ⚪ 掌握Kafka的索引机制； ⚪ 掌握Kafka的消息系统语义； 一、Kafka消息流处理 1. Producer 写入消息 流程说明： 1. producer 要向Kafka生产消息，需要先通过…...

编程日记 2023/8/19 2:13:24

LVGL学习笔记 28 - 键盘keyboard

目录 1. 设置关联文本框 2. 设置模式 2.1 LV_KEYBOARD_MODE_TEXT_LOWER 2.2 LV_KEYBOARD_MODE_TEXT_UPPER 2.3 LV_KEYBOARD_MODE_SPECIAL 2.4 LV_KEYBOARD_MODE_NUMBER 2.5 LV_KEYBOARD_MODE_USER_1 ~ LV_KEYBOARD_MODE_USER_4 3. 使能弹窗模式 4. 更改按键布局 5. 事…...

编程日记 2023/8/19 2:12:23

【Microsoft 支持】【数据库-MySql】当您尝试从大于 5000 的 TCP 端口连接时收到错误 WSAENOBUFS (10055)

​ 一、转载原文 When you try to connect from TCP ports greater than 5000 you receive the error ‘WSAENOBUFS (10055)’ Symptoms If you try to set up TCP connections from ports that are greater than 5000, the local computer responds with the following WSAE…...

编程日记 2023/8/19 2:11:21

【学会动态规划】最长湍流子数组（23）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…...

编程日记 2023/8/19 2:10:20

【网络编程·网络层】IP协议

目录 一、IP协议的概念 二、IP协议的报头 1、四位首部长度 2、16位总长度&#xff08;解包&#xff09; 3、8位协议&#xff08;分用&#xff09; 4、16位首部校验和 5、8位生存时间 6、32位源IP和32位目的IP 7、4位版本/8位服务类型 8、16位标识 9、3位标志 10、1…...

编程日记 2023/8/19 2:09:17

Qwen2.5-7B+Tools应用场景解析：智能客服、信息查询等实战案例

Qwen2.5-7BTools应用场景解析&#xff1a;智能客服、信息查询等实战案例 1. 引言&#xff1a;当大语言模型遇上工具 想象一下&#xff0c;你正在运营一家电商平台&#xff0c;每天要处理上千条客户咨询。人工客服团队疲于应对&#xff0c;而客户等待时间越来越长。这时&#…...

编程新知 2026/3/28 13:10:06

PhotoSwipe终极指南：打造极致流畅的移动端图片浏览体验

PhotoSwipe终极指南&#xff1a;打造极致流畅的移动端图片浏览体验 【免费下载链接】PhotoSwipe JavaScript image gallery for mobile and desktop, modular, framework independent 项目地址: https://gitcode.com/gh_mirrors/ph/PhotoSwipe PhotoSwipe 是一款功能强大…...

编程新知 2026/3/28 13:06:06

数据科学家的懒人包：OpenClaw+nanobot自动清洗CSV并生成可视化报告

数据科学家的懒人包&#xff1a;OpenClawnanobot自动清洗CSV并生成可视化报告 1. 为什么需要自动化数据清洗与报告生成&#xff1f; 作为一名经常处理数据的人&#xff0c;我发现自己每周都在重复同样的工作&#xff1a;收到CSV文件→检查格式→处理缺失值→生成可视化→发送…...

编程新知 2026/3/28 12:19:55

MobaXterm配置教程：Chord视频时空理解工具远程开发

MobaXterm配置教程&#xff1a;Chord视频时空理解工具远程开发 1. 为什么需要MobaXterm来开发Chord视频时空理解工具 在AI视频理解领域&#xff0c;Chord这类工具通常部署在高性能服务器或云环境中&#xff0c;本地开发机往往难以承载其计算需求。这时候&#xff0c;远程开发…...

编程新知 2026/3/28 11:07:15

用日频数据简单构建“随波逐流”因子

第一次记录量化策略复现 也是第一次自己做股票复现 欢迎各位大佬阅读和提出问题讨论&#xff01; 欢迎提出问题&#xff01;目前框架还不是很完善~这个因子来源于"方正证券研究所"2023年发布的研报&#xff0c;这个因子是个很小的因子&#xff0c;甚至只是这篇研报的…...

编程新知 2026/3/28 10:39:01

SDMatte处理动物与宠物图像效果展示：毛发级精度的自然抠图

SDMatte处理动物与宠物图像效果展示&#xff1a;毛发级精度的自然抠图 1. 为什么宠物抠图这么难 给宠物照片抠图可能是设计师最头疼的任务之一。想象一下&#xff0c;一只金毛犬站在浅色地毯上&#xff0c;毛发边缘几乎和背景融为一体&#xff1b;或者一只黑猫蜷缩在深色沙发…...

编程新知 2026/3/28 9:06:08

Qwen3.5-35B-A3B-AWQ-4bit镜像免配置优势：无Python依赖冲突，纯净运行环境

Qwen3.5-35B-A3B-AWQ-4bit镜像免配置优势&#xff1a;无Python依赖冲突&#xff0c;纯净运行环境 1. 镜像核心优势 Qwen3.5-35B-A3B-AWQ-4bit镜像最突出的特点是其开箱即用的纯净环境。与传统AI部署方案相比&#xff0c;这个镜像解决了开发者最头疼的Python依赖冲突问题。通过…...

编程新知 2026/3/28 7:43:21

Simulink低通滤波器实战：从随机信号生成到参数调优（附完整模型）

Simulink低通滤波器实战&#xff1a;从随机信号生成到参数调优&#xff08;附完整模型&#xff09; 在嵌入式系统和自动化工程领域&#xff0c;信号处理的质量往往直接决定整个系统的稳定性。想象一下&#xff0c;当你从传感器获取的实时数据充满噪声和毛刺时&#xff0c;如何确…...

编程新知 2026/3/28 7:14:57

CLIP-GmP-ViT-L-14与YOLOv11结合：实现目标检测后的细粒度语义描述

CLIP-GmP-ViT-L-14与YOLOv11结合&#xff1a;实现目标检测后的细粒度语义描述 你有没有遇到过这种情况&#xff1f;一个智能摄像头告诉你“画面里有人”&#xff0c;但你更想知道的是“画面里有一个穿着蓝色外套、正在打电话的年轻人”。或者&#xff0c;一个货架分析系统告诉…...

编程新知 2026/3/28 5:46:08

5G核心网UDR深度解析：从签约数据管理到策略数据存储的完整流程

5G核心网UDR深度解析&#xff1a;从签约数据管理到策略数据存储的完整流程 在5G核心网&#xff08;5GC&#xff09;架构中&#xff0c;统一数据仓储功能&#xff08;UDR&#xff09;扮演着数据中枢的角色。作为电信级网络的关键组件&#xff0c;UDR不仅需要处理海量用户数据的实…...

编程新知 2026/3/28 5:42:06