Nextjs 动态路由获取参数

目录

一、创建page目录下的路由文件

二、通过useRouter来获取动态参数


先看官方文档:Routing: Dynamic Routes | Next.js

使用Nextjs13版本参考官方文档后实现仍有问题,网上的材料大多和官网一致,经过测试后,我找到了这个解决方案:

一、创建page目录下的路由文件

这一步与官方文档描述一致

二、通过useRouter来获取动态参数

import React from "react";
import {useRouter} from "next/router";export default function People() {const route = useRouter();const query: { username: string } = route.query as { username: string }console.log(query.username)return <div>My Page</div>
}

useRouter()有个query属性可以获取到动态路径的参数,这样问题就解决了。

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

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

相关文章

【日记】今天好困(407 字)

正文 4T 硬盘降价了&#xff0c;好心动。虽然只降了 10 块钱……. 为什么硬盘这么贵啊&#xff01;哼。 柜面上杂事好多。虽然一天到晚见不到几个客户&#xff0c;但杂事就是很多。一个头两个大。也不知道从哪儿冒出来的这么多事。 芒果干到了&#xff01;还没去取&#xff0c;…

JAVASE之类和对象(1)

路虽远&#xff0c;行则将至&#xff1b;事虽难&#xff0c;做则必成。 主页&#xff1a;趋早——Step 专栏&#xff1a;JAVASE gitte&#xff1a;https://gitee.com/good-thg 引言&#xff1a; 这篇文章我们只介绍前半部分&#xff0c;下一篇文章会介绍剩下的部分。 目录 一、…

Python操作MySQL数据库的工具--sqlalchemy

文章目录 一、pymysql和sqlalchemy的区别二、sqlalchemy的详细使用1.安装库2.核心思想3.整体思路4.sqlalchemy需要连接数据库5.使用步骤1.手动提前创建数据库2.使用代码创建数据表3.用代码操作数据表3.1 增加数据3.2 查询数据3.3 删除数据3.4 修改数据 一、pymysql和sqlalchemy…

2025秋招深度学习基础面试题(一)

01. 卷积和BN如何融合提升推理速度 Conv和BN的融合:在网络的推理阶段,可以将BN层的运算融合到Conv层中,减少运算量,加速推理。本质上是修改了卷积核的参数,在不增加Conv层计算量的同时,略去了BN层的计算量。def fuse_conv_bn(conv, bn):std = (bn.running_var + bn.eps).…

探索Facebook:数字社交的新时代

Facebook&#xff0c;作为全球最大的社交网络平台之一&#xff0c;一直在引领着数字社交的发展潮流。随着科技的不断进步和社会的不断变迁&#xff0c;Facebook也在不断演进和创新&#xff0c;迎接着数字社交的新时代。本文将探索Facebook在数字社交领域的新发展&#xff0c;以…

Behind the Code:Polkadot 如何重塑 Web3 未来

2024 年 5 月 17 日 Polkadot 生态 Behind the Code 第二季第一集 《创造 Web3 的未来》正式上线。第一集深入探讨了 Polkadot 和 Web3 技术在解决数字身份、数据所有权和去中心化治理方面的巨大潜力。 &#x1f50d; 查看完整视频&#xff1a; https://youtu.be/_gP-M5nUidc?…

抖音视频怎么去水印保存部分源码|短视频爬虫提取收集下载工具

抖音视频怎么去水印保存部分源码|短视频爬虫提取收集下载工具 抖音视频去水印保存部分源码&#xff1a; 通过使用Python中的requests、re和os等库&#xff0c;可以编写如下代码来实现抖音视频去水印保存的功能。 短视频爬虫提取手机下载工具的使用方法&#xff1a; 该工具主…

安科瑞为河南省促进分布式光伏发电健康持续发展提供解决方案

1 光伏、储能运维市场分析 在光伏、储能行业飞速发展的同时&#xff0c;已建的光伏、风力发电站和储能系统的监控、运维管理项目的招标也非常多&#xff0c;2023年上半年&#xff0c;光伏电站开发企业运维招标规模28.6GW&#xff0c;同比增长204.3%&#xff0c;上述28.6GW招标…

Blender导出fbx模型,导入到ue5中模型丢失纹理材质

UE5系列文章目录 文章目录 UE5系列文章目录前言一、问题原因二、最终效果 前言 Blender导出fbx模型&#xff0c;导入到ue5中&#xff0c;发现模型丢失纹理材质&#xff0c;里面的原神人物模型妮露居然是白模&#xff0c;郁闷了大半天 一、问题原因 我在Blender导出fbx文件时…

C中十进制转十六进制示例

uint8_t QR_code_RxBfr[255]{0}; uint8_t TouchCode[100];memcpy (&Sys.TouchCode[0], &QR_code_RxBfr[0], Sys.QR_code_Len);Str &Sys.TouchCode[TmpVble];Sys.Card_ID 0; while(0 ! isdigit(*Str)){Sys.Card_ID Sys.Card_ID*10 *Str - 0;Str;} 最后在通过以下…

嵌入式科普(18)Ubuntu在移动硬盘的安装和启动

目录 一、概述 二、应用场景 三、移动硬盘安装Ubuntu 3.1 移动硬盘格式化 3.2 VMware安装Ubuntu到移动硬盘 四、电脑BIOS启动移动硬盘Ubuntu 五、从VMware启动移动硬盘Ubuntu 六、问题解决(坑)和思考提问 嵌入式科普(18)Ubuntu在移动硬盘的安装和启动 一、概述 在移动硬…

在R中赞扬下努力工作的你,奖励一份CheetShet

传说有个R&#xff0c;R里有个包&#xff0c;包的名字叫praise&#xff0c;会一直不停地夸赞你。 > praise() [1] "You are sensational!" > praise() [1] "You are luminous!" > praise() [1] "You are pioneering!" > praise() […

P1【知识点】【数据结构】【链表LinkedList】C++版

链表是一种逻辑上连续&#xff0c;内存上分散的线性表数据结构&#xff0c;是用一组任意的空间&#xff08;可以连续&#xff0c;也可以不连续&#xff09;来存放数据元素。每个数据元素成为一个”结点“&#xff0c;每个结点由数据域和指针域组成。 访问元素&#xff08;Acce…

ABAP Json解析案例

ABAP解析返回的JSON 案例 DATA:LTOKEN TYPE STRING.DATA: LL_LINES(10),"行数LL_TABIX(10),"循环标号LL_PECNT TYPE P LENGTH 6 DECIMALS 2, "百分比LL_PECET(6),"百分数LL_TEXT(40)."消息CLEAR: LL_LINES,LL_TABIX,LL_PECNT,LL_PECET,LL_TEXT.* …

JVM优化之使用Jstack命令查找JVM死锁

JVM优化之使用Jstack命令查找JVM死锁 示例代码 public class DeadLockDemo {private static Object lock1 new Object();private static Object lock2 new Object();public static void main(String[] args) {new Thread(() -> {synchronized (lock1) {try {System.out.p…

老的 IIS + MSSQL 网站迁移实例

因为公司需要从云上迁移回本地&#xff0c;但云平台不愿意导出虚拟机文件&#xff0c;所以公司需要手工迁移。 查看了一下云主机&#xff0c;安装了IIS&#xff0c;还有MSSQL数据库&#xff0c;于是在本地搭建好相同的OSIISMSSQL 环境&#xff0c;在把数据库导入完成、 IIS 搭建…

HX6203是一个完整的电池充电器控制器的两个(8.4V)电池锂离子电池芯片IC

一般描述 该HX6203是一个完整的电池充电器控制器的两个(8.4V)电池锂离子电池。HX6203为快速充电锂离子电池提供了一种小巧、简单、高效的解决方案。一个外部检测电阻以高精度设置充电电流。 内部电阻分压器和精密参考设置的最终浮动电压为8.4V时&#xff0c;输入…

全面提升工业物联网的安全问题——青创智通

工业物联网解决方案-工业IOT-青创智通 工业物联网&#xff0c;作为现代工业制造领域的新兴技术&#xff0c;正在引领一场全新的工业革命。它将传感器、控制器、移动通信、智能分析等先进技术融入到工业生产过程的各个环节&#xff0c;极大地提高了制造效率&#xff0c;改善了产…

什么是谷歌留痕?

其实它就是指你的网站在谷歌中留下的种种痕迹&#xff0c;无论你是在做外链&#xff0c;还是优化网站内容&#xff0c;或是改善用户体验&#xff0c;所有这些都会在谷歌的搜索引擎里留下一些“脚印”&#xff0c;用比较seo一点的说法&#xff0c;指的是网站在其构建和优化过程中…

el-table 划入划出方法

<template><div><el-table :data"tableData" style"width: 100%" cell-mouse-enter"handleMouseEnter" cell-mouse-leave"handleMouseLeave"><el-table-column prop"ddd" label"日期2" widt…