关于ReactV18的页面跳转传参和接收

一、使用路由方式进行传参和接收(此处需使用 useNavigate 和 useParams 两个hooks)

1 首先需要配置好路由形式如下 :id(参数)

{

path: "/articleDetail/:id",

element: lazyElement(<ArticleDetail />),

},

2 传递参数 使用 useNavigate

navigate("/published", { state: { articleName: props.Title } });

3 接收参数 使用 useParams

const { id } = useParams();

二、使用地址方式进行(此处需使用 useNavigate 和 useSearchParams 两个hooks)

navigate('/login?name=xiaoming&age=10')传参
const [getSearchArr] = useSearchParams();接收

使用 getSearchArr.getAll("SearchKey")获取详细值

相关推荐
腾讯云云开发几秒前
【你可能不知道的开发技巧】一行代码完成小程序的CloudBase鉴权登录
前端·后端·微信小程序
Micro麦可乐几秒前
前端真的能防录屏?EME(加密媒体扩展) DRM 反录屏原理 + 实战代码
前端·媒体·eme·drm·前端防盗录
一个很帅的帅哥1 分钟前
three.js和WebGL
开发语言·javascript·webgl
一 乐1 分钟前
校园社区系统|基于java+vue的校园悬赏任务平台系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
晚霞的不甘6 分钟前
华为云 DevUI 实战开发指南:构建现代化前端应用的最佳实践
前端·华为云
申阳6 分钟前
Day 21:03. 基于 SpringBoot4 开发后台管理系统-整合 SpringSecurity 完成登录功能
前端·后端·程序员
嘴平伊之豬16 分钟前
对照typescript学习鸿蒙ArkTS
前端·harmonyos
奋斗猿17 分钟前
前端实测:RSC不是银弹,但它真的重构了我的技术栈
前端·react.js
Hilaku18 分钟前
为什么永远不要相信前端输入?绕过前端验证,只需一个 cURL 命令!
前端·javascript·安全
玄魂21 分钟前
VChart 扩展新功能:一行代码解锁数据回归与趋势分析
前端·echarts·数据可视化