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 系列文章

ReactPress 是什么?:https://blog.csdn.net/m0_37981569/article/details/143495843
ReactPress—基于React的免费开源博客&CMS内容管理系统:https://blog.csdn.net/m0_37981569/article/details/143455403
ReactPress数据库表结构设计全面分析:https://blog.csdn.net/m0_37981569/article/details/143662572
ReactPress 安装指南:从 MySQL 安装到项目启动:https://blog.csdn.net/m0_37981569/article/details/143662086
ReactPress – An Open-Source Publishing Platform Built with React:https://blog.csdn.net/m0_37981569/article/details/143635836
ReactPress:构建高效、灵活、可扩展的开源发布平台:https://blog.csdn.net/m0_37981569/article/details/143635551
ReactPress技术揭秘:https://blog.csdn.net/m0_37981569/article/details/143634709
ReactPress:深入解析技术方案设计与源:https://blog.csdn.net/m0_37981569/article/details/143610300
ReactPress:重塑内容管理的未来:https://blog.csdn.net/m0_37981569/article/details/143610158
ReactPress系列—NestJS 服务端开发流程简介:https://blog.csdn.net/m0_37981569/article/details/143536219
ReactPress系列—Next.js 的动态路由使用介绍:https://blog.csdn.net/m0_37981569/article/details/143535847

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文熟悉新版llama.cpp使用并本地部署LLAMA

0. 简介 最近是快到双十一了再给大家上点干货。去年我们写了一个大模型的系列&#xff0c;经过一年&#xff0c;大模型的发展已经日新月异。这一次我们来看一下使用llama.cpp这个项目&#xff0c;其主要解决的是推理过程中的性能问题。主要有两点优化&#xff1a; llama.cpp …

yolov8涨点系列之轻量化主干网络替换

文章目录 YOLOv8 替换成efficientvit轻量级主干网络的好处计算效率提升模型部署更便捷方便模型移植 模型可扩展性增强便于集成其他模块支持模型压缩技术 主干网络替换1.创建yolov8_efficeintVit.py2.修改task.py(1)引入创建的efficientViT文件(2)修改_predict_once函数(3)修改p…

python代码打包exe文件(可执行文件)

一、exe打包 1、构建虚拟环境 conda create -n env_name python3.8 #env_name,python根据自己需求修改2、保存和安装项目所需的所有库 pip freeze > requirements.txt3、虚拟环境安装项目包、库 pip install -r requirements.txt4、安装pyinstaller pip install pyinst…

scala学习记录,Set,Map

set&#xff1a;集合&#xff0c;表示没有重复元素的集合&#xff0c;特点&#xff1a;唯一 语法格式&#xff1a;val 变量名 Set [类型]&#xff08;元素1&#xff0c;元素2...&#xff09; 可变不可变 可变&#xff08;mutable&#xff09;可对元素进行添加&#xff0c;删…

ai外呼机器人的作用有哪些?

ai外呼机器人具有极高的工作效率。日拨打成千上万通不是问题&#xff0c;同时&#xff0c;机器人还可以快速筛选潜在客户&#xff0c;将更多精力集中在有价值的客户身上&#xff0c;进一步提升营销效果。183-3601-7550 ai外呼机器人的作用&#xff1a; 1、搭建系统&#xff0c…

Matlab实现鲸鱼优化算法优化随机森林算法模型 (WOA-RF)(附源码)

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 鲸鱼优化算法&#xff08;Whale Optimization Algorithm, WOA&#xff09;是受座头鲸捕食行为启发而提出的一种新型元启发式优化算法。该算法通过模拟座头鲸围绕猎物的螺旋游动和缩小包围圈的方式&#xff0c;在…

Linux基础4-进程5(程序地址空间详解)

上篇文章:Linux基础4-进程4&#xff08;环境变量&#xff0c;命令行参数详解&#xff09;-CSDN博客 本章重点&#xff1a; 1 重新理解c/c地址空间 2 虚拟地址空间 一. c/c地址空间 地址空间布局图: 运行下列代码&#xff0c;进行观察 #include <stdio.h> #include <…

本地连接IP地址的自主设置指南‌

在数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。无论是家庭网络还是企业网络&#xff0c;正确配置IP地址是确保网络畅通无阻的基础。IP地址&#xff0c;即互联网协议地址&#xff0c;是网络中每个设备的唯一标识。掌握如何自主设置本地连接的IP…

对 fn.apply(this, arguments) 的使用还在疑惑?快进来看看它的设计含义及常见使用场景吧~

&#x1f64c; 如文章有误&#xff0c;恳请评论区指正&#xff0c;谢谢&#xff01; ❤ 写作不易&#xff0c;「点赞」「收藏」「转发」 谢谢支持&#xff01; 背景 近期在研究高阶函数封装的过程中&#xff0c;看到 fn.apply(this, arguments) 的出镜率非常高&#xff0c;而如…

【ReactPress】React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

ReactPress 是使用React开发的开源发布平台&#xff0c;用户可以在支持React和MySQL数据库的服务器上架设属于自己的博客、网站。也可以把 ReactPress 当作一个内容管理系统&#xff08;CMS&#xff09;来使用。 前言 此项目是用于构建博客网站的&#xff0c;包含前台展示、管理…

Pycharm远程调试deepspeed!可用!

本人写代码的习惯就是一定是要从别人优秀的代码中调试学习的&#xff0c;直接运行看的话&#xff0c;可能知道了大概的逻辑但是缺无法知道细节的话&#xff08;参数的含义或者某某数据格式类型&#xff09;&#xff0c;可能对整体代码逻辑的把控不是狠好&#xff0c;所以还是从…

Redis 中 Bitmap 原理和应用

Bitmap Redis中的Bitmap&#xff08;位图&#xff09;是一种较为特殊数据类型&#xff0c;它以最小单位bit来存储数据&#xff0c;我们知道一个字节由 8个 bit 组成&#xff0c;和传统数据结构用字节存储相比&#xff0c;这使得它在处理大量二值状态&#xff08;true、false 或…

基于 STM32 的天气时钟项目中添加天气数据的网络获取功能

基于 STM32 的天气时钟项目中添加天气数据的网络获取功能&#xff0c;您需要确保您的开发环境具备网络连接能力。这里以 ESP8266 Wi-Fi 模块为例&#xff0c;详细说明如何实现网络获取天气数据的功能。 1. 硬件连接 连接 ESP8266 模块 请参考以下连接方式&#xff0c;将 ESP82…

mysql-springboot netty-flink-kafka-spark(paimon)-minio

1、下载spark源码并编译 mkdir -p /home/bigdata && cd /home/bigdata wget https://archive.apache.org/dist/spark/spark-3.4.3/spark-3.4.3.tgz 解压文件 tar -zxf spark-3.4.3.tgz cd spark-3.4.3 wget https://raw.githubusercontent.com/apache/incubator-celeb…

【Spring】体系结构

Spring框架至今集成了多个模块&#xff0c;这些模块分布在数据访问/集成&#xff08;Data Access/Integration&#xff09;、Web层、面向切面的编程&#xff08;Aspect Oriented Programming&#xff0c;AOP&#xff09;模块、植入&#xff08;Instrumentation&#xff09;模块…

软件缺陷等级评定综述

1. 前言 正确评估软件缺陷等级&#xff0c;在项目的生命周期中有着重要的作用&#xff1a; 指导缺陷修复的优先级和资源分配 在软件开发和维护过程中&#xff0c;资源&#xff08;包括人力、时间和资金&#xff09;是有限的。通过明确缺陷的危险等级&#xff0c;可以帮助团队合…

Linux:vim命令总结及环境配置

文章目录 前言一、vim的基本概念二、vim模式命令解析1. 命令模式1&#xff09;命令模式到其他模式的转换&#xff1a;2&#xff09;光标定位&#xff1a;3&#xff09;其他命令&#xff1a; 2. 插入模式3. 底行模式4. 替换模式5. 视图模式6. 外部命令 三、vim环境的配置1. 环境…

Obsidian的Git插件设置配置全流程 -- 简单的电脑端多平台同步方案及常见问题

Obsidian的Git插件设置配置全流程 -- 简单的电脑端多平台同步方案及常见问题 参考文章引言1. git 介绍及安装2. git 本地配置及远程仓库链接3. obsidian 的 git 插件4. 常用的使用场景和对应的命令4.1. 本地仓库已推送到远端&#xff0c;如何在另一个电脑上第一次同步4.2 多端同…

【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美

文章目录 C 位运算详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;位运算基础应用1.1 判断字符是否唯一&#xff08;easy&#xff09;解法&#xff08;位图的思想&#xff09;C 代码实现易错点提示时间复杂度和空间复杂度 1.2 丢失的数字&#xff08;easy&#xff0…

Redis(3):持久化

一、Redis高可用概述 在介绍Redis高可用之前&#xff0c;先说明一下在Redis的语境中高可用的含义。   我们知道&#xff0c;在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、9…