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…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
MySQL 部分重点知识篇
一、数据库对象 1. 主键 定义 :主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 :确保数据的完整性,便于数据的查询和管理。 示例 :在学生信息表中,学号可以作为主键ÿ…...
