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.rhkb.cn/news/466176.html

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

相关文章

计算机的发展史

计算机的发展史是一个跨越多个世纪的过程&#xff0c;从最早的机械计算设备到如今的高性能、智能化计算机。以下是计算机发展史的简要概述&#xff0c;按重要的技术进步和里程碑进行归类&#xff1a; 1. 早期的计算工具&#xff08;公元前3000年—17世纪&#xff09; 计算机的…

基于STM32的实时时钟(RTC)教学

引言 实时时钟&#xff08;RTC&#xff09;是微控制器中的一种重要功能&#xff0c;能够持续跟踪当前时间和日期。在许多应用中&#xff0c;RTC用于记录时间戳、定时操作等。本文将指导您如何使用STM32开发板实现RTC功能&#xff0c;通过示例代码实现当前时间的读取和显示。 环…

Python | Leetcode Python题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; class Solution:def complexNumberMultiply(self, num1: str, num2: str) -> str:real1, imag1 map(int, num1[:-1].split())real2, imag2 map(int, num2[:-1].split())return f{real1 * real2 - imag1 * imag2}{real1 * imag2 imag1…

CoD-MIL: 基于诊断链提示的多实例学习用于全切片图像分类|文献速递-基于深度学习的病灶分割与数据超分辨率

Title 题目 CoD-MIL: Chain-of-Diagnosis Prompting Multiple Instance Learning for Whole Slide Image Classification CoD-MIL: 基于诊断链提示的多实例学习用于全切片图像分类 01 文献速递介绍 病理检查被广泛视为肿瘤诊断的金标准&#xff0c;因为它为治疗决策和患者…

232转485模块测试

概述 常用的PLC一般会有两个左右的232口&#xff0c;以及两个左右的485口&#xff0c;CAN口等&#xff0c;但是PLC一般控制的设备可能会有很多&#xff0c;会超出通讯口的数量&#xff0c;此时我们一般会采用一个口接多个设备&#xff0c;这种情况下要注意干扰等因素&#xff0…

网络编程——TCP通信练习

目录 一、多发多收 二、接收和反馈 三、上传文件 四、解决上传文件名重复问题 五、上传文件多线程版 六、上传文件线程池版 七、B/S(接收浏览器的消息并打印) 一、多发多收 客户端&#xff1a;多次发送数据 服务器&#xff1a;接收多次数据&#xff0c;并打印 public cl…

【stm32】RTC时钟的介绍与使用

RTC时钟的介绍与使用 一、时间戳1、Unix时间戳2、UTC/GMT3、时间戳转换 二、BKP简介及代码编写1、BKP简介2、BKP基本结构3、BKP库函数介绍&#xff1a;4、程序编写&#xff1a; 三、RTC简介及代码编写1、RTC简介2、RTC框图2、RTC基本结构3、RTC相关库函数介绍&#xff1a;4、程…

在docker中搭建redis哨兵环境

文章目录 一、引言二、环境准备前提条件目录结构 三、配置文件1. 主节点配置文件 sentinel-master.conf2. 从节点配置文件3. 哨兵配置文件 sentinel.conf4. Docker Compose 文件 四、启动 Docker Compose五、验证哨兵机制1. 检查主节点状态2. 检查从节点状态3. 检查哨兵状态4. …

职场高手揭秘,细节如何左右你的成败与升迁之路

身在职场&#xff0c;每一个人都想得到老板的器重&#xff0c;能不断地加薪、升职&#xff0c;从而获得职场的成功。但你知道&#xff0c;影响一个人职场成功&#xff0c;或者说影响升职加薪的最重要因素是什么吗&#xff1f; 许多人会说那要靠运气&#xff0c;也有人认为工作…

微信小程序 高校教材征订系统

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 系统分为三个角色&#xff0c;分别是教材科、系教学秘书、教研室主任。系统主要完成功能是教材科要发布教材征订信息&am…

RNN中的梯度消失与梯度爆炸问题

梯度消失与梯度爆炸问题 循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一类具有短期记忆能力的神经网络&#xff0e;在循环神经网络中&#xff0c;神经元不但可以接受其他神经元的信息&#xff0c;也可以接受自身的信息&#xff0c;形成具有…

Unity网络开发基础(part5.网络协议)

目录 前言 网络协议概述 OSI模型 OSI模型的规则 第一部分 物理层 数据链路层 网络层 传输层 第二部分 ​编辑 应用层 表示层 会话层 每层的职能 TCP/IP协议 TCP/IP协议的规则 TCP/IP协议每层的职能 TCP/IP协议中的重要协议 TCP协议 三次握手 四次挥手 U…

ENSP GVRP动态学习VLAN

手工配置的VLAN称为静态VLAN&#xff0c;通过GVRP协议创建的VLAN称为动态VLAN。 GVRP有三种注册模式&#xff0c;不同的模式对静态VLAN和动态VLAN的处理方式也不同。 GVRP的三种注册模式分别定义如下&#xff1a; Normal模式&#xff1a;允许动态VLAN在端口上进行注册…

【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题

目录 1. 单例模式 (1) 饿汉模式 (2) 懒汉模式 1. 单线程版本 2. 多线程版本 2. 解决懒汉模式产生的线程安全问题 (1) 产生线程安全的原因 (2) 解决线程安全问题 1. 通过加锁让读写操作紧密执行 方法一 方法二 2. 处理加锁引入的新问题 问题描述 …

论文阅读:Computational Long Exposure Mobile Photography (二)

这篇文章是谷歌发表在 2023 ACM transaction on Graphic 上的一篇文章&#xff0c;介绍如何在手机摄影中实现长曝光的一些拍摄效果。 Abstract 长曝光摄影能拍出令人惊叹的影像&#xff0c;用运动模糊来呈现场景中的移动元素。它通常有两种模式&#xff0c;分别产生前景模糊或…

大语言模型鼻祖Transformer的模型架构和底层原理

Transformer 模型的出现标志着自然语言处理&#xff08;NLP&#xff09;技术的一次重大进步。这个概念最初是针对机器翻译等任务而提出的&#xff0c;Transformer 后来被拓展成各种形式——每种形式都针对特定的应用&#xff0c;包括原始的编码器-解码器&#xff08;encoder-de…

解决vue3导出.xlsx的blob文件受损问题

1、 首先要设置get或者post请求的类型。这里我用到post请求 eg&#xff1a;在http.ts中添加公共的方法。 export function post1(url: string, params: any): Promise<AxiosResponse> | Promise<AxiosResponse<any>> {return new Promise((resolve, reject…

Jest项目实战(6):搭建文档网站

搭建文档网站 创建 API 文档可以选择如下的 3 种方式&#xff1a; 功能较少&#xff0c;可以直接写在 README.md 文件里面内容较多&#xff0c;可以单独写一个文件API 数量众多&#xff08;Vue、React 这种级别&#xff09;&#xff0c;需要考虑单独拿一个网站来做详细的文档…

STM32项目---水质水位检测

1 项目简介 1.1 项目需求 本项目通过测量水体的TDS来反映水体的质量。并同时可以测量水位&#xff08;水深&#xff09;。 1.2 系统总体设计 2 硬件模块 2.1 硬件选型 水位测量模块 TDS采集模块 外置ADC模块&#xff08;ADS1115&#xff09; 2.2 水位测量模块使用方法 …

从神经元到神经网络:深度学习的进化之旅

神经元、神经网络 神经元 Neuron )&#xff0c;又名感知机( Perceptron )&#xff0c;在模型结构上与 逻辑回归 一致&#xff0c;这里以一个二维输入量的例子对其进行进一步 的解释&#xff1a; 假设模型的输 入向 量是一 维特征向 (x1,x2). 则单神 经元的模型结构 如下…