Next.js - Route Groups（路由组）

最新推荐文章于 2025-04-27 11:12:54 发布
最新推荐文章于 2025-04-27 11:12:54 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript 前端 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanfan_h/article/details/132342159
版权

路由组的作用

在应用程序目录中，嵌套文件夹通常会映射到 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 开发指南 路由篇 | 动态路由、路由组、平行路由和拦截路由
sybh的博客
02-18 3119
实际项目开发的时候，有的路由场景会比较复杂，比如数据库里的文章有很多，我们不可能一一去定义路由，此时该怎么办？组织代码的时候，有的路由是用于移动端，有的路由是用于 PC 端，该如何组织？如何有条件的渲染页面，比如未授权的时候显示登录框？如何让同一个路由根据情况不同展示不同的内容？本篇我们会一一解决这些问题，在此篇，你将会感受到 App Router 强大的路由功能。
usage.txt-2
huhuoyun的专栏
02-15 1637
局域网共享喇叭 ---------------- $>paprefs #PulseAudio Preferences. $>pavucontrol #Volume Control. 终端快捷键 ---------------- SHIFT+CTRL+v #终端复制. SHIFT+CTRL+c #终端粘贴. SHIFT+CTRL+t #新建标签页. SHIFT+.
Next.js 学习 - 路由系统（Routing）
Chloeeeeeeee的博客
10-16 1135
Next.js 的路由系统基于文件系统，这意味着文件和文件夹的结构决定了 URL 路径。相较于传统的 React 应用中的路由配置，Next.js 的文件路由系统非常简洁和自动化。
Next路由篇
liu289747235的专栏
04-17 1811
路由中的每个文件夹都表示一个。每个路由段都映射到中的相应文件扩展名可以是.js.jsx.tsx。
Next.JS如何创建多个根布局
步子哥的博客
01-07 733
在每个路由组内创建layout.js文件：在每个路由组的文件夹中，创建一个名为layout.js的文件。在每个layout.js文件中添加根布局：在每个layout.js文件中，您可以定义独立的根布局。在每个路由组中使用layout.js文件：在每个路由组的路由文件中，导入并使用相应的layout.js文件来渲染根布局。删除顶层的layout.js文件：首先，删除顶层的layout.js文件，因为我们将在每个路由组内创建独立的根布局。通过这些步骤，您可以创建多个根布局，并为每个路由组提供独立的UI或体验。
Next.js 13 App Route 使用中文路徑方法
wangwailok的博客
08-18 426
Next.js 13 是一個流行的 React 框架，它的 App Route 功能可以讓你建立內部路由，並將所有頁面集中在一個文件夾中。如果你需要使用中文路徑，只需在 next.config.js 文件中加入以下配置： const nextConfig = { ...withNextIntlInit({ rewrites() { localesMap cosnt [ { source: `/獸醫`, //目標路徑
【Next.js】Route Groups 功能详解
lph159的博客
11-16 989
Route Groups 是 Next.js 13 引入的一个实用功能，主要用于在不影响 URL 结构的情况下组织项目文件夹。通常情况下，项目结构直接影响 URL 路径，比如会生成这样的路径。而通过将文件夹名改为带括号的形式，Next.js 就会将其视为路由组，从而不将该文件夹名包含到 URL 中。这种方式帮助开发者在代码层次上创建不同模块的分组，同时保持 URL 的整洁。
Laravel开发-groups
08-28
这个"Laravel开发-groups"可能是一个专门为Laravel 5设计的用户组管理包，它可以帮助开发者更有效地实现用户角色和权限的划分，提升应用的安全性和灵活性。 Laravel本身提供了基础的身份验证功能，但针对更复杂的...
laravel基础--路由
qq_37865672的博客
07-13 442
laravel的路由是定义在/routes/web.php文件中 一 .自定义路由文件 1.在routes目录下新建一个路由文件引入 Illuminate\Support\Facades\Route; 2.注册路由文件，在 app\Providers\RouteServiceProvider.php编写方法并调用 路由注册 protected function mapLyRoutes() { Route::middleware('web') ->namespace
四十八----react实战
chujinmaolu的博客
12-27 1458
以下可以使用styles.xxx方式使用class是因为使用css-loader配置了module。开发环境使用路径模块名类名命名方便调试"[path][name][local]“，生产环境使用”[hash:base64:5]"这个命名进行压缩混淆代码减少代码体积。是原子化的css包，解决一些css的复杂性，类名约定的负担。它主要使用postcss进行css的babelloader转换编译。控制粒度：bootsrap>tailwind>cssheadless ui 是没有样式的。
Next.js-基于文件的路由
m0_54644067的博客
12-02 1520
在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个page（页面）都使用其文件名作为路由（route）。如果你创建了一个命名为的文件并导出（export）一个如下所示的 React 组件，则可以通过 /about 路径进行访问。
Next.js 中的路由初学者指南，附有示例
qq_39652397的博客
03-12 5898
使用 Next.js 有很多好处，但一个非常有用的特性是它的文件路由系统。这种架构显着简化了在网站内创建路由的过程。在本教程中，我们将学习如何设置 Next.js 项目以及 Next.js 中的文件路由系统如何工作。 我们还将学习如何： 创建静态和动态页面 Link用, 以及它的一些 props实现页面转换 使用useRouter()钩子从 URL 获取查询参数 动态嵌套路由 ……还有更多。 我们将通过构建一个投资组合页面来了解所有这些。 Next.js 功能 Next.js 是一个基于 R
Next.js 系统性教学：加载界面、重定向与路由分组
二进制的梦想
12-07 1071
Next.js 在加载界面、重定向与路由分组方面提供了强大且灵活的功能。这些特性不仅提高了开发效率，也优化了用户体验。通过合理运用这些工具，开发者可以构建出结构清晰、性能优越的现代 Web 应用。
Next.js 中的路由类型详解
一萧烟雨任平生
11-18 843
ext.js 自 13 版本引入了 App Router，为路由系统带来了更强大的功能。虽然 Pages Router 依然保留，适合逐步迁移，但 App Router 已成为主流推荐方式。本文将基于 App Router 的新特性，同时补充 Pages Router，帮助您深入了解 Next.js 的路由类型和使用场景。
next.js路由的学习
人间草木
04-01 5150
next.js给我们配置好路由了，next.js默认匹配pages目录的index.js作为根路径/，其他的路径也是这样按文件名匹配的。而我们的各种路由跳转依赖的不再是react-router而是next.js给我们封装好的路由 在pages文件夹新建文件夹 my ，在my里新建my.js 在浏览器输入 http://localhost:3000/my/my，就能跳转到my页...
Vue2、Vue3区别之响应式原理
2203_75479159的博客
04-27 1250
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法 代码示例： 2. 局限性 无法检测动态属性： 解
字节跳动在GitHub上有哪些开源项目
interpromotion的博客
04-23 1228
字节跳动（ByteDance）在GitHub上开源了许多项目，涵盖前端、后端、云原生、AI、数据库等多个领域。这些项目体现了字节跳动在技术领域的广泛投入，适合开发者学习或直接应用于生产环境。
JavaScript 入门全讲解
idree的博客
04-27 1227
JavaScript 入门全讲解
Rollup、Webpack、Esbuild 和 Vite 前端打包工具
最新发布
weixin_42283818的博客
04-27 1041
Rollup、Webpack、Esbuild 和 Vite 都是前端开发中常用的打包工具，它们各有特点，以下是对它们的详细对比：
linux下如何进行网络链路事件通知
04-05
在Linux下，可以使用Netlink套接字来进行网络链路事件通知。Netlink是Linux内核中用于内核与用户空间通信的一种机制，它可以提供一种异步通知机制来通知用户空间有关网络链路的事件，比如链路状态变化、路由变化等。 具体步骤如下： 1. 创建一个Netlink套接字： ``` int sock = socket(AF_NETLINK, SOCK_RAW, NETLINK_ROUTE); ``` 2. 绑定套接字到一个本地地址： ``` struct sockaddr_nl addr; memset(&addr, 0, sizeof(addr)); addr.nl_family = AF_NETLINK; addr.nl_groups = RTNLGRP_LINK; // 监听链路事件 bind(sock, (struct sockaddr*)&addr, sizeof(addr)); ``` 3. 监听套接字并接收事件： ``` while (1) { char buf[1024]; int len = recv(sock, buf, sizeof(buf), 0); struct nlmsghdr* nlh = (struct nlmsghdr*)buf; while (NLMSG_OK(nlh, len)) { if (nlh->nlmsg_type == NLMSG_DONE) { // 消息处理完毕 break; } if (nlh->nlmsg_type == NLMSG_ERROR) { // 错误处理 break; } // 处理链路事件 struct ifinfomsg* ifi = (struct ifinfomsg*)NLMSG_DATA(nlh); if (ifi->ifi_change & IFF_UP) { // 链路状态变化 } nlh = NLMSG_NEXT(nlh, len); } } ``` 通过以上步骤，就可以实现在Linux系统下进行网络链路事件通知了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值