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.slug
和 router.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
相关文章:

ReactPress系列—Next.js 的动态路由使用介绍
ReactPress Github项目地址:https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议,感谢Star。 Next.js 的动态路由使用介绍 Next.js 是一个流行的 React 框架,支持服务端渲染、静态站点生成和动态路由等功能,极大地简化…...

DevOps业务价值流:需求设计最佳实践
DevOps实践正推动着产品快速迭代与高质量交付,但需求设计作为产品开发的关键起点,往往被忽视。它不仅是收集与分析需求的过程,更是将需求转化为可实施产品特性的核心。本文深入探讨DevOps业务价值流中的需求设计,从调研、整理、原…...

A15基于Spring Boot的宠物爱心组织管理系统的设计与实现
🙊作者简介:在校研究生,拥有计算机专业的研究生开发团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹 赠送计算机毕业设计600…...

RC高通滤波器Bode图分析(传递函数零极点)
RC高通滤波器 我们使得R1K,C1uF;电容C的阻抗为Xc; 传递函数 H ( s ) u o u i R X C R R 1 s C R s R C 1 s R C (其中 s j ω ) H(s)\frac{u_{o} }{u_{i} } \frac{R }{X_{C}R} \frac{R }{\frac{1}{sC}R} \fra…...

SpeechT5 模型
微软开源的 SpeechT5 语音模型,主要包括以下功能 语音转文字:用于自动语音识别(ASR)。文字转语音:用于合成音频(TTS)。语音转语音:用于不同声音之间的转换或进行语音增强。 T5 网络…...
网站用户行为分析:方法、工具与实践
摘要:随着互联网发展,网站竞争激烈,用户行为分析对网站建设与运营至关重要。本文综合介绍了基于服务器日志和客户端收集用户行为数据的方法,包括各自优缺点及相关工具;阐述了网站用户分析的五大常规方法;以…...
医疗医药企业新闻稿怎么写?健康行业品牌宣传背书的报纸期刊杂志媒体有哪些
【本篇由 言同数字全球媒体 原创】在撰写医疗、医学和制药相关稿件时,遵循一定的结构和内容规范至关重要。以下是一些写作建议以及适合发表健康类稿件的报纸、杂志及新闻媒体的推荐。 一、稿件写作结构 标题 原则:简洁、明了,能够准确传达主…...
2024-11-06 问AI: [AI面试题] 人工智能如何用于欺诈检测和网络安全?
文心一言 人工智能在欺诈检测和网络安全领域的应用日益广泛,其强大的数据处理和分析能力为这一领域带来了革命性的变化。以下详细介绍人工智能在欺诈检测和网络安全中的具体应用: 一、欺诈检测 身份认证和访问控制: 通过验证用户的身份信息…...
个人3DCoat设置分享
个人3DCoat设置分享 将当前选择的对象置于屏幕正中显示: /键 版本3DCoat 2023 3DCoat自定义快捷键: Quick Pick: Q Transform: T Primitives: Shift A Cut Off : K Res : Shift Clear Space : Delete 隐藏/显示对象: 点击Sculpt Tree中的眼睛按钮 显示隐…...

Spark 程序开发与提交:本地与集群模式全解析
Spark 的介绍与搭建:从理论到实践-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 目录 一、本地开发与远程提交测试 (一)问题背景 (二)解决方案 集群环境准…...
Linux编程:DMA增加UDP 数据传输吞吐量并降低延迟
文章目录 0. 引言1. 原理介绍1.1 DMA 与中断的协同机制1.2. DMA优化UDP 数据包发送 2. DMA 配置优化 0. 引言 UDP 网络传输常面临高 CPU 占用、传输延迟和丢包等挑战。本文将介绍 DMA 如何优化 UDP 数据包的发送,以提高吞吐量、减少延迟并降低 CPU 占用。 阅读本文…...
鸿蒙开启无线调试
DevEco Studio没找到通过WI-FI连接手机的可视化操作按钮,就去官网看了下hdc - TCP连接场景 操作也比较简单: 第1步:PC通过USB连接手机/平板; 第2步:在手机/平板的“开发者选项”中打开“无线调试”并记录下IP和端口…...
C. DS循环链表—约瑟夫环 (Ver. I - B)
题目描述 N个人坐成一个圆环(编号为1 - N),从第S个人开始报数,数到K的人出列,后面的人重新从1开始报数。问最后剩下的人的编号。 例如:N 3,K 2,S 1。2号先出列,然后是…...

【刷题】优选算法
优选算法 双指针 202. 快乐数 链接:. - 力扣(LeetCode) 【思路】 第一个实例是快乐数,因为会变为1且不断是1的循环 第二个实例不可能为1,因为会陷入一个没有1的循环 根据两个实例和鸽巢原理可以发现不断的平方和最…...

Python 在PDF中绘制形状(线条、矩形、椭圆形等)
在PDF中绘制图形可以增强文档的视觉效果。通过添加不同类型的形状,如实线、虚线、矩形、圆形等,可以使文档更加生动有趣,提高读者的阅读兴趣。这对于制作报告、演示文稿或是教材特别有用。本文将通过以下几个示例介绍如何使用Python 在PDF中绘…...

《今日制造与升级》是什么级别的期刊?是正规期刊吗?能评职称吗?
问题解答 问:《今日制造与升级》是不是核心期刊? 答:不是,是知网收录的正规学术期刊。 问:《今日制造与升级》级别? 答:国家级。主管单位:中国机械工业联合会 …...
loading为什么不更新
场景:封装好的弹框,按钮上加了个loading状态,根据传入的值弹框提交的模块内容不一样。loading更新过后,但是值没有变。 注)写法一loading不更新,写法二loading值更新。 一、写法一 写法一中的 acceptanc…...

Rust 力扣 - 1652. 拆炸弹
文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要遍历长度长度为k的窗口,然后把窗口内数字之和填充到结果数组中的对应位置即可 题解代码 impl Solution {pub fn decrypt(code: Vec<i32>, k: i32) -> Vec<i32> {let n c…...
使用Golang实现开发中常用的【并发设计模式】
使用Golang实现开发中常用的【并发设计模式】 设计模式是解决常见问题的模板,可以帮助我们提升思维能力,编写更高效、可维护性更强的代码 屏障模式 未来模式 管道模式 协程池模式 发布订阅模式 下面是使用 Go 语言实现屏障模式、未来模式、管道模式…...

基于Zynq FPGA对雷龙SD NAND的性能测试评估
文章目录 一、SD NAND特征1.1 SD卡简介1.2 SD卡Block图 二、SD卡样片三、Zynq测试平台搭建3.1 测试流程3.2 SOC搭建 四、软件搭建五、测试结果六、总结 一、SD NAND特征 1.1 SD卡简介 雷龙的SD NAND系列有多种型号,本次测试使用的是CSNP4GCR01-AMW和CSNP32GCR01-A…...

手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 ;/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...