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

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

相关文章:

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

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

DevOps业务价值流:需求设计最佳实践

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

A15基于Spring Boot的宠物爱心组织管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…...

RC高通滤波器Bode图分析(传递函数零极点)

RC高通滤波器 我们使得R1K&#xff0c;C1uF&#xff1b;电容C的阻抗为Xc&#xff1b; 传递函数 H ( s ) u o u i R X C R R 1 s C R s R C 1 s R C &#xff08;其中 s j ω &#xff09; H(s)\frac{u_{o} }{u_{i} } \frac{R }{X_{C}R} \frac{R }{\frac{1}{sC}R} \fra…...

SpeechT5 模型

微软开源的 SpeechT5 语音模型&#xff0c;主要包括以下功能 语音转文字&#xff1a;用于自动语音识别&#xff08;ASR&#xff09;。文字转语音&#xff1a;用于合成音频&#xff08;TTS&#xff09;。语音转语音&#xff1a;用于不同声音之间的转换或进行语音增强。 T5 网络…...

网站用户行为分析:方法、工具与实践

摘要&#xff1a;随着互联网发展&#xff0c;网站竞争激烈&#xff0c;用户行为分析对网站建设与运营至关重要。本文综合介绍了基于服务器日志和客户端收集用户行为数据的方法&#xff0c;包括各自优缺点及相关工具&#xff1b;阐述了网站用户分析的五大常规方法&#xff1b;以…...

医疗医药企业新闻稿怎么写?健康行业品牌宣传背书的报纸期刊杂志媒体有哪些

【本篇由 言同数字全球媒体 原创】在撰写医疗、医学和制药相关稿件时&#xff0c;遵循一定的结构和内容规范至关重要。以下是一些写作建议以及适合发表健康类稿件的报纸、杂志及新闻媒体的推荐。 一、稿件写作结构 标题 原则&#xff1a;简洁、明了&#xff0c;能够准确传达主…...

2024-11-06 问AI: [AI面试题] 人工智能如何用于欺诈检测和网络安全?

文心一言 人工智能在欺诈检测和网络安全领域的应用日益广泛&#xff0c;其强大的数据处理和分析能力为这一领域带来了革命性的变化。以下详细介绍人工智能在欺诈检测和网络安全中的具体应用&#xff1a; 一、欺诈检测 身份认证和访问控制&#xff1a; 通过验证用户的身份信息…...

个人3DCoat设置分享

个人3DCoat设置分享 将当前选择的对象置于屏幕正中显示: /键 版本3DCoat 2023 3DCoat自定义快捷键: Quick Pick: Q Transform: T Primitives: Shift A Cut Off : K Res : Shift Clear Space : Delete 隐藏/显示对象&#xff1a; 点击Sculpt Tree中的眼睛按钮 显示隐…...

Spark 程序开发与提交:本地与集群模式全解析

Spark 的介绍与搭建&#xff1a;从理论到实践-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 目录 一、本地开发与远程提交测试 &#xff08;一&#xff09;问题背景 &#xff08;二&#xff09;解决方案 集群环境准…...

Linux编程:DMA增加UDP 数据传输吞吐量并降低延迟

文章目录 0. 引言1. 原理介绍1.1 DMA 与中断的协同机制1.2. DMA优化UDP 数据包发送 2. DMA 配置优化 0. 引言 UDP 网络传输常面临高 CPU 占用、传输延迟和丢包等挑战。本文将介绍 DMA 如何优化 UDP 数据包的发送&#xff0c;以提高吞吐量、减少延迟并降低 CPU 占用。 阅读本文…...

鸿蒙开启无线调试

DevEco Studio没找到通过WI-FI连接手机的可视化操作按钮&#xff0c;就去官网看了下hdc - TCP连接场景 操作也比较简单&#xff1a; 第1步&#xff1a;PC通过USB连接手机/平板&#xff1b; 第2步&#xff1a;在手机/平板的“开发者选项”中打开“无线调试”并记录下IP和端口…...

C. DS循环链表—约瑟夫环 (Ver. I - B)

题目描述 N个人坐成一个圆环&#xff08;编号为1 - N&#xff09;&#xff0c;从第S个人开始报数&#xff0c;数到K的人出列&#xff0c;后面的人重新从1开始报数。问最后剩下的人的编号。 例如&#xff1a;N 3&#xff0c;K 2&#xff0c;S 1。2号先出列&#xff0c;然后是…...

【刷题】优选算法

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

Python 在PDF中绘制形状(线条、矩形、椭圆形等)

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

《今日制造与升级》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《今日制造与升级》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《今日制造与升级》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;中国机械工业联合会 …...

loading为什么不更新

场景&#xff1a;封装好的弹框&#xff0c;按钮上加了个loading状态&#xff0c;根据传入的值弹框提交的模块内容不一样。loading更新过后&#xff0c;但是值没有变。 注&#xff09;写法一loading不更新&#xff0c;写法二loading值更新。 一、写法一 写法一中的 acceptanc…...

Rust 力扣 - 1652. 拆炸弹

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们只需要遍历长度长度为k的窗口&#xff0c;然后把窗口内数字之和填充到结果数组中的对应位置即可 题解代码 impl Solution {pub fn decrypt(code: Vec<i32>, k: i32) -> Vec<i32> {let n c…...

使用Golang实现开发中常用的【并发设计模式】

使用Golang实现开发中常用的【并发设计模式】 设计模式是解决常见问题的模板&#xff0c;可以帮助我们提升思维能力&#xff0c;编写更高效、可维护性更强的代码 屏障模式 未来模式 管道模式 协程池模式 发布订阅模式 下面是使用 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系列有多种型号&#xff0c;本次测试使用的是CSNP4GCR01-AMW和CSNP32GCR01-A…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...