位置: IT常识 - 正文

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程)

编辑:rootadmin
【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API

推荐整理分享【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react router prompt,react router prompt,react-router6,react-router5,react-router6,react router5,react-router5,react router v6,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航 回顾上篇文章👉🏻【React Router 6 快速上手一】,今天来学习react-router-dom6版本的另一些相关知识! 感兴趣的小伙伴一起来看看吧~🤞

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程)

文章目录1. 向路由组件传递params参数:useParams()2. 向路由组件传递search参数:useSearchParams()3. 向路由组件传递state参数:useLocation()4. 编程式路由导航useNavigate()5. useInRouterContext()6. useNavigationType()7. useOutlet()8. useResolvedPath()1. 向路由组件传递params参数:useParams()

在v5版本中,路由组件传递参数方式有三种:params、search、state。在v6中,都能用这三种方式,但是写法不一样了。

当点击消息1这个导航链接时,展示下方对应的Detail路由组件,并向这个组件传递params参数(ID,TITLE,CONTENT)信息。

向路由组件传递params参数:和v5一样,在路径后面跟上想要传递的值

Message.jsx

message.map((m) => { return ( // 路由链接 <li key={m.id}> <Link to={`detail/${m.id}/${m.title}/${m.content}`}> {m.title} </Link>&nbsp;&nbsp; </li> )})

在路由表中,

本文链接地址:https://www.jiuchutong.com/zhishi/294570.html 转载请保留说明!

上一篇:YOLOv8代码上线,官方宣布将发布论文,附精度速度初探和对比总结(yolov1代码)

下一篇:阿尔萨斯的葡萄酒村,法国上莱茵省 (© Walter Bibikow/eStock Photo)(阿尔萨斯葡萄园)

  • 一招恢复对方撤回的微信(一招恢复对方撤回的微信图片华为)

    一招恢复对方撤回的微信(一招恢复对方撤回的微信图片华为)

  • 电脑windows系统任务栏图标怎么调整大小

    电脑windows系统任务栏图标怎么调整大小

  • 惠普打印机8位pin码在哪里看(惠普打印机8位pin码app可以查吗)

    惠普打印机8位pin码在哪里看(惠普打印机8位pin码app可以查吗)

  • 苹果12港版支持电信吗(苹果12港版支持双卡吗)

    苹果12港版支持电信吗(苹果12港版支持双卡吗)

  • iphonex序列号G0开头(苹果x序列号g0开头好吗)

    iphonex序列号G0开头(苹果x序列号g0开头好吗)

  • wps页面布局在哪里(wps中的页面布局在哪里)

    wps页面布局在哪里(wps中的页面布局在哪里)

  • 手机卡无服务是不是卡坏了(手机卡无服务是为什么)

    手机卡无服务是不是卡坏了(手机卡无服务是为什么)

  • 三d打印技术是什么意思(三D打印技术是哪个国家发明的)

    三d打印技术是什么意思(三D打印技术是哪个国家发明的)

  • 分组交换和电路交换的区别(分组交换和电路交换相比)

    分组交换和电路交换的区别(分组交换和电路交换相比)

  • 微信联系人可以分组吗(微信联系人可以批量删除吗)

    微信联系人可以分组吗(微信联系人可以批量删除吗)

  • 数据删除和数据擦除的区别(数据删除和数据清除的概念)

    数据删除和数据擦除的区别(数据删除和数据清除的概念)

  • 苹果8怎么强行关机(苹果8怎么强行刷机)

    苹果8怎么强行关机(苹果8怎么强行刷机)

  • 苹果x怎么关led灯(苹果X怎么关闭自动调节亮度)

    苹果x怎么关led灯(苹果X怎么关闭自动调节亮度)

  • vivos5手机什么时候上市(vivo5s什么时候上市)

    vivos5手机什么时候上市(vivo5s什么时候上市)

  • 商务通是什么(商务通官方网站)

    商务通是什么(商务通官方网站)

  • 手机飞行模式闹钟会响吗(手机飞行模式闹钟会不会响)

    手机飞行模式闹钟会响吗(手机飞行模式闹钟会不会响)

  • 小米盒子出现竖条怎么办(小米盒子竖屏设置在哪)

    小米盒子出现竖条怎么办(小米盒子竖屏设置在哪)

  • 荣耀v20怎么关闭后台程序(荣耀v20怎么关闭锁屏壁纸)

    荣耀v20怎么关闭后台程序(荣耀v20怎么关闭锁屏壁纸)

  • 韩剧tv的电影在哪里看(韩剧tv的电影在线观看)

    韩剧tv的电影在哪里看(韩剧tv的电影在线观看)

  • 华为运动手环怎么调时间(华为运动手环怎么连接oppo手机)

    华为运动手环怎么调时间(华为运动手环怎么连接oppo手机)

  • 展会app怎么开发(展会设计软件)

    展会app怎么开发(展会设计软件)

  • 【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步(微信小程序怎么制作自己的小程序)

    【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步(微信小程序怎么制作自己的小程序)

  • 学习笔记:点云库PCL(Point Cloud Library )介绍(点云入门)

    学习笔记:点云库PCL(Point Cloud Library )介绍(点云入门)

  • phpcms api怎么写接口(phpcms开发手册)

    phpcms api怎么写接口(phpcms开发手册)

  • 税控盘维护费会计分录怎么写
  • 商贸企业出口进项税会计分录汇总
  • 发票红冲需要做账吗
  • 利息支出可以抵扣吗
  • 当前企业不存在是怎么回事
  • 百旺税盘网络连接不上
  • 保证金可以挪用吗
  • 周转借款会计分录
  • 国内公司向境外公司借款
  • 购买的包装物用什么消毒
  • 适用增值税差额征税的小规模纳税人
  • 广告公司 成本
  • 分公司注销分配表
  • 1697508750
  • 坏账会计处理方法
  • 公司运输车辆加油会计分录
  • php常用的优化方式
  • Win11怎么打开网络适配器
  • 旧房转让土地增值税计算案例
  • sgmain.exe - sgmain是什么进程 有何作用
  • php escapeshellarg
  • 公司向个人借款利息如何处理
  • yii gridview
  • 减值测试的资产有哪些
  • 使用php进行mysql数据库编程的基本步骤
  • 销售地下车库缴纳哪些税
  • 销售方红字发票账务处理?
  • 制造业企业预提短期借款利息
  • 显示国家税务总局东莞分局打来电话是诈骗还是正规电话
  • css实现文字颜色渐变
  • uniapp scroll-view基础用法
  • 清除命令窗口所有内容用()命令,清除变量用()命令
  • php的urlencode
  • 申报表中的免税销售额是收入吗
  • 小规模纳税人印花税减半征收政策
  • 羊羊 过好
  • 金融企业贷款损失税前扣除
  • 贷款和应收款项属于金融资产的哪类
  • 投资收益如何记账
  • 没进项票
  • 职工食堂的费用怎么入账
  • 汽车4s店售后业绩看板
  • 新公司成立后税务方面有哪些流程2023
  • 桶装矿泉水计入什么科目
  • 数据库镜像是什么意思
  • 其他应付款科目贷方登记发生的各种应付
  • 应收贷方余额表示什么意思
  • 无发票费用可以入账吗
  • 职工宿舍怎么入账
  • 待摊费用和预付费用的区别
  • 什么叫特定资产和负债
  • 损益类科目如何填写手工总账
  • 个体工商户和公司的优缺点
  • 企业如何建账之类的账目
  • mac系统操作教程
  • appcrash是什么文件
  • 如何使用组策略脚本
  • 用u盘安装ubuntu
  • linux系统没有yum
  • centos用户添加到组
  • xp系统注册表在哪
  • linux怎么删除文本文件
  • centos7添加ip地址
  • win10的播放设置在哪
  • javascript标准
  • cocos2dx 3.1.1 win8+eclipse环境下android游戏开发环境搭建
  • 批处理常用命令总结
  • 安卓作业仿银行
  • 使用jquery实现的项目
  • bat延迟1秒
  • javascript的介绍
  • 使用BMFont+NGUI利用图片制作自定义字体
  • javascript教程
  • python数据通信
  • js获取图片的宽高
  • 工程项目管理费计入什么科目
  • 年收入12w
  • 个体户注销税盘需要公章吗
  • 企业购票员有风险吗
  • 赞美税务干部对联大全集锦
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设