ReactPress系列—Next.js 的动态路由使用介绍

ReactPress Github项目地址:https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议,感谢Star。

在这里插入图片描述

Next.js 的动态路由使用介绍

Next.js 是一个流行的 React 框架,支持服务端渲染、静态站点生成和动态路由等功能,极大地简化了构建现代 Web 应用程序的过程。本文将详细介绍 Next.js 的动态路由功能,并通过简单的代码示例帮助理解。

一、动态路由的基本概念

动态路由允许开发者创建灵活的 URL 模式,对于管理不同类型的页面内容尤其有用,例如博客文章、产品页面等,可以根据 ID 或分类来加载相应的内容。

在 Next.js 中,可以通过向页面路径添加方括号 [param] 来创建动态路由。例如,pages/post/[pid].js 可以匹配 /post/1/post/abc 等路由。

二、动态路由的使用示例

1. 基本动态路由

假设我们有一个博客应用,需要根据文章的 slug 来显示不同的文章详情页。我们可以创建一个 pages/post/[slug].js 文件来处理动态路由。

// pages/post/[slug].js
import { useRouter } from 'next/router';export default function Post() {const router = useRouter();const { slug } = router.query;return (<div><h1>Post: {slug}</h1>{/* 假设这是从 API 获取数据的部分,实际应用中可能通过 getServerSideProps 或 getStaticProps 实现 */}</div>);
}

在这个例子中,router.query.slug 包含了动态路由的参数,即文章的 slug。

2. 多个动态路由段

如果我们需要更复杂的路由结构,例如 /post/abc/comment-123,可以创建 pages/post/[slug]/[commentId].js 文件。

// pages/post/[slug]/[commentId].js
import { useRouter } from 'next/router';export default function PostComment() {const router = useRouter();const { slug, commentId } = router.query;return (<div><h1>Post: {slug}</h1><p>Comment: {commentId}</p></div>);
}

在这个例子中,router.query.slugrouter.query.commentId 分别包含了文章的 slug 和评论的 ID。

3. 捕获所有路由(Catch-all Routes)

有时我们需要匹配任意深度的嵌套路由,例如 /shop/clothes/tops/t-shirts。这时可以使用捕获所有路由(Catch-all Routes),通过在方括号内添加省略号 ... 来实现。

// pages/shop/[...slug].js
import { useRouter } from 'next/router';export default function Shop() {const router = useRouter();const { slug } = router.query;return (<div><h1>Shop: {slug.join('/')}</h1></div>);
}

在这个例子中,router.query.slug 是一个数组,包含了所有匹配的路由段。通过 slug.join('/') 可以将它们拼接成一个完整的路径。

4. 可选捕获所有路由(Optional Catch-all Routes)

通过将参数包含在双方括号中 [[...slug]],可以将捕获所有路由设为可选。例如,pages/shop/[[...slug]].js 将匹配 /shop/shop/clothes/shop/clothes/tops 等。

// pages/shop/[[...slug]].js
import { useRouter } from 'next/router';export default function OptionalShop() {const router = useRouter();const { slug = [] } = router.query;return (<div><h1>Optional Shop: {slug.join('/') || 'Home'}</h1></div>);
}

在这个例子中,如果路由没有参数,slug 将默认为一个空数组,页面将显示 “Optional Shop: Home”。

三、客户端导航到动态路由

在 Next.js 中,客户端导航到动态路由是通过 next/link 组件实现的。

// pages/index.js
import Link from 'next/link';export default function Home() {return (<ul><li><Link href="/post/abc"><a>Go to Post ABC</a></Link></li><li><Link href="/post/abc/comment-123"><a>Go to Comment 123 on Post ABC</a></Link></li><li><Link href="/shop/clothes/tops/t-shirts"><a>Go to T-shirts in Tops in Clothes</a></Link></li></ul>);
}

在这个例子中,Link 组件用于创建指向动态路由的链接。

四、总结

Next.js 的动态路由功能为开发者提供了极大的灵活性,可以轻松地创建复杂的 URL 模式,并根据路由参数加载相应的内容。通过简单的代码示例,本文介绍了基本动态路由、多个动态路由段、捕获所有路由和可选捕获所有路由的使用方法,以及如何在客户端导航到动态路由。希望这些内容能帮助你更好地理解和应用 Next.js 的动态路由功能。

更多关于NextJS动态路由的使用可以参考:https://nextjs.org/docs/app/building-your-application/routing

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件压力测试有多重要?北京软件测试公司有哪些?

软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。压力测试是给软件不断加压&#xff0c;强制其在极限的情况下运行&#xff0c;观察它可以运行到何种程度&#xff0c;从而发现性能缺陷。 在数字化时代&#xff0c;用户对软件性能的要求越…

学习方法该升级了,‌AI时代的弯道超车:【心流学习法】行动与意识合一的巅峰进化

你是否曾感到内心如荒漠般干涸&#xff0c;面对浩瀚的知识海洋&#xff0c;热情逐渐消磨殆尽&#xff1f; 你是否渴望忘却时间的流逝&#xff0c;心无旁骛&#xff0c;与知识展开一场纯粹而深邃的对话&#xff1f; ​在AI时代&#xff0c;智能体处理数据、知识迭代的速率让人…

手边酒店多商户版V2源码独立部署_博纳软云

新版采用laraveluniapp开发&#xff0c;为更多平台小程序开发提供坚实可靠的底层架构基础。后台UI全部重写&#xff0c;兼容手机端管理。 全新架构、会员卡、钟点房、商城、点餐、商户独立管理

机器学习(二)——线性回归模型、多分类学习(附核心思想和Python实现源码)

目录 关于1. 基本形式2. 线性回归2.1 单变量线性回归2.2 多元线性回归2.2 对数线性回归 3. 对数几率回归4. 线性判别分析5. 多分类学习5.1 拆分策略 6. 类别不平衡问题X 案例代码X.1 源码X.2 数据集&#xff08;糖尿病数据集&#xff09;X.3 模型效果 关于 本文是基于西瓜书&a…

跳表原理笔记

课程地址 跳表是一种基于随机化的有序数据结构&#xff0c;它提出是为了赋予有序单链表以 O(logn) 的快速查找和插入的能力 创建 首先在头部创建一个 sentinel 节点&#xff0c;然后在 L1 层采用“抛硬币”的方式来决定 L0 层的指针是否增长到 L1 层 例如上图中&#xff0c;L…

wpf 制作丝滑Flyout浮出侧边栏Demo (Mahapps UI框架)

Flyout 属性 CloseButtonVisibility: 设置为 Collapsed&#xff0c;意味着关闭按钮不可见。TitleVisibility: 设置为 Collapsed&#xff0c;意味着标题不可见。IsPinned: 设置为 True&#xff0c;意味着这个 Flyout 会固定住&#xff0c;不会自动关闭。Opacity: 设置为 1&…

MySQL记录锁、间隙锁、临键锁(Next-Key Locks)详解

行级锁&#xff0c;每次操作锁住对应的行数据。锁定粒度最小&#xff0c;发生锁冲突的概率最低&#xff0c;并发度最高。 应用在InnoDB存储引擎中。InnoDB的数据是基于索引组织的&#xff0c;行锁是通过对索引上的索引项加锁来实现的&#xff0c;而不是对记录加的锁。 对于行…

GeoSever发布图层(保姆姬)

发布服务的具体步骤。 1. 安装 GeoServer 下载 GeoServer 安装包&#xff1a;GeoServer 官网按照安装说明进行安装&#xff0c;可以选择 Windows、Linux 或其他平台。 2. 启动 GeoServer 启动 GeoServer 通常通过访问 http://localhost:8080/geoserver 进行。默认用户名和密…

交易所开发:构建安全、高效、可靠的数字资产交易平台

随着数字资产的不断发展&#xff0c;数字货币交易所作为连接数字资产与现实世界的重要桥梁&#xff0c;逐渐成为全球金融市场的核心组成部分。无论是比特币、以太坊等主流加密货币&#xff0c;还是各种基于区块链的资产&#xff0c;都需要通过交易所进行交换和流通。因此&#…

了解分布式数据库系统中的CAP定理

在分布式数据库系统的设计和实现中&#xff0c;CAP定理是一个至关重要的概念。CAP定理&#xff0c;全称为一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容忍性&#xff08;Partition tolerance&#xff09;定理&#xff0c;由…

HTB:Sense[WriteUP]

目录 连接至HTB服务器并启动靶机 1.What is the name of the webserver running on port 80 and 443 according to nmap? 使用nmap对靶机TCP端口进行开放扫描 2.What is the name of the application that presents a login screen on port 443? 使用浏览器访问靶机80端…

【LeetCode每日一题】——802.找到最终的安全状态

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 图 二【题目难度】 中等 三【题目编号】 802.找到最终的安全状态 四【题目描述】 有一个有…

stm32使用串口的轮询模式,实现数据的收发

------内容以b站博主keysking为原型&#xff0c;整理而来&#xff0c;用作个人学习记录。 首先在STM32CubeMX中配置 前期工作省略&#xff0c;只讲重点设置。 这里我配置的是USART2的模式。 会发现&#xff0c;PA2和PA3分别是TX与RX&#xff0c;在连接串口时需要TX对RX&…

C++上机实验|继承与派生编程练习

1.实验目的 (1) 掌握派生与继承的概念与使用方法 (2) 运用继承机制对现有的类进行重用。 (3) 掌握继承中的构造函数与析构函数的调用顺序, (4) 为派生类设计合适的构造函数初始化派生类。 (5) 深入理解继承与组合的区别。 2.实验内容 设计一个人员类 person 和一个日期类 da…

【STL_list 模拟】——打造属于自己的高效链表容器

一、list节点 ​ list是一个双向循环带头的链表&#xff0c;所以链表节点结构如下&#xff1a; template<class T>struct ListNode{T val;ListNode* next;ListNode* prve;ListNode(int x){val x;next prve this;}};二、list迭代器 2.1、list迭代器与vector迭代器区别…

如何高效集成每刻与金蝶云星空的报销单数据

每刻报销单集成到金蝶云星空的技术实现 在企业日常运营中&#xff0c;费用报销和付款申请是两个至关重要的环节。为了提升数据处理效率和准确性&#xff0c;我们采用了轻易云数据集成平台&#xff0c;将每刻系统中的报销单数据无缝对接到金蝶云星空的付款申请单中。本案例将详…

陪玩app小程序开发案例源码核心功能介绍

‌陪玩系统‌是一种基于互联网技术的服务平台&#xff0c;旨在为用户提供游戏陪玩、语音聊天、社交互动等功能。陪玩系统通常包括以下几个核心功能&#xff1a; ‌游戏约单‌&#xff1a;用户可以通过陪玩系统发布游戏约单&#xff0c;寻找合适的陪玩伙伴一起进行游戏&#xf…

【题解】【排序】—— [NOIP2017 普及组] 图书管理员

【题解】【排序】—— [NOIP2017 普及组] 图书管理员 [NOIP2017 普及组] 图书管理员题目背景题目描述输入格式输出格式输入输出样例输入 #1输出 #1 提示 1.思路解析2.AC代码 [NOIP2017 普及组] 图书管理员 通往洛谷的传送门 题目背景 NOIP2017 普及组 T2 题目描述 图书馆中…

WPF+MVVM案例实战(十七)- 自定义字体图标按钮的封装与实现(ABC类)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1、案例效果1、按钮分类2、ABC类按钮实现1、文件创建2、字体图标资源3、自定义依赖属性4、按钮特效样式实现 3、按钮案例演示1、页面实现与文件创建2、依赖注入3 运…

《Qwen2-VL》论文精读【下】:发表于2024年10月 Qwen2-VL 迅速崛起 | 性能与GPT-4o和Claude3.5相当

1 前言 《Qwen2-VL》论文精读【上】&#xff1a;发表于2024年10月 Qwen2-VL 迅速崛起 | 性能与GPT-4o和Claude3.5相当 上回详细分析了Qwen2-VL的论文摘要、引言、实验&#xff0c;下面继续精读Qwen2-VL的方法部分。 文章目录 1 前言2 方法2.1 Model Architecture2.2 改进措施2…