位置: 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)(阿尔萨斯葡萄园)

  • 华为荣耀play3的语音助手唤醒方法是什么(华为荣耀play3的语音助手叫什么)

    华为荣耀play3的语音助手唤醒方法是什么(华为荣耀play3的语音助手叫什么)

  • 苹果手机怎么关闭自动卸载不常用软件(苹果手机怎么关闭境外来电)

    苹果手机怎么关闭自动卸载不常用软件(苹果手机怎么关闭境外来电)

  • iphone se2是单卡还是双卡(iphonese2是单卡吗)

    iphone se2是单卡还是双卡(iphonese2是单卡吗)

  • 手机wps有单倍行距吗(手机wps单倍行距怎么弄)

    手机wps有单倍行距吗(手机wps单倍行距怎么弄)

  • 对up主稿件的一键三连长按什么键(对up主稿件的一连三操作)

    对up主稿件的一键三连长按什么键(对up主稿件的一连三操作)

  • 荣耀9有红外线遥控吗(荣耀9红外线支持吗)

    荣耀9有红外线遥控吗(荣耀9红外线支持吗)

  • 苹果手机面部解锁失灵都有什么原因(苹果手机面部解锁可以两个人使用吗)

    苹果手机面部解锁失灵都有什么原因(苹果手机面部解锁可以两个人使用吗)

  • iphonexsmax支持什么快充(iphonexsmax支持什么解锁)

    iphonexsmax支持什么快充(iphonexsmax支持什么解锁)

  • 苹果11怎么下载微信(苹果11怎么下载手机铃声)

    苹果11怎么下载微信(苹果11怎么下载手机铃声)

  • 微信置顶语只有自己能看到吗(微信置顶语只有苹果才可以吗)

    微信置顶语只有自己能看到吗(微信置顶语只有苹果才可以吗)

  • a1822是ipad哪一款air(a1822是ipad哪一款几寸)

    a1822是ipad哪一款air(a1822是ipad哪一款几寸)

  • 双显卡是什么意思(双显卡叫什么)

    双显卡是什么意思(双显卡叫什么)

  • 宽带红灯闪烁怎么回事(宽带红灯闪烁是什么意思)

    宽带红灯闪烁怎么回事(宽带红灯闪烁是什么意思)

  • airpods pro可以连两个手机吗(airpods pro可以连接华为手机吗)

    airpods pro可以连两个手机吗(airpods pro可以连接华为手机吗)

  • 手机迅雷ios下载不了(手机迅雷iphone版下载)

    手机迅雷ios下载不了(手机迅雷iphone版下载)

  • 手机上面的hd是什么意思(手机上面的hd是什么意思,怎么关OPPO)

    手机上面的hd是什么意思(手机上面的hd是什么意思,怎么关OPPO)

  • mysql默认升序还是降序(mysql默认顺序)

    mysql默认升序还是降序(mysql默认顺序)

  • 手机ufs是什么意思(ufs手机有哪些 附表)

    手机ufs是什么意思(ufs手机有哪些 附表)

  • 为什么vivo27没有面部解锁(为什么没有vivox22)

    为什么vivo27没有面部解锁(为什么没有vivox22)

  • vivox9还原出厂设置(vivix9恢复出厂设置)

    vivox9还原出厂设置(vivix9恢复出厂设置)

  • 腾讯家长监护平台怎么解除(腾讯家长监护平台 已经成年)

    腾讯家长监护平台怎么解除(腾讯家长监护平台 已经成年)

  • 苹果电话怎么转人工(苹果电话怎么转到华为手机)

    苹果电话怎么转人工(苹果电话怎么转到华为手机)

  • oppo照片水印怎么加(oppo照片水印怎么修改时间)

    oppo照片水印怎么加(oppo照片水印怎么修改时间)

  • 缴纳个人所得税还算应届毕业生吗
  • 个人车辆无偿给公司使用
  • 小规模拍卖公司差额征税
  • 视同销售的销项税怎么计算?
  • 税务机关如何处理公司多交税
  • 出口退税计算公式 中华会计网校
  • 印花税是用来干吗的
  • 公司购买厂房需要交房产税吗
  • 一般纳税人建账建几本帐
  • 合同金额与结算金额一致,如何约定
  • 税务局查账需要几天
  • 债务重组损失是费用吗
  • 房屋出租需要缴纳个人所得税吗
  • 销售货物尚未收到会计分录
  • 实收资本认缴制期限
  • 购进商品交印花税
  • 宾馆收入应按什么计算
  • 印花税计税依据是销售收入吗
  • 委托加工应税消费品消费税的账务处理是怎样的?
  • 软件开发服务费会计分录
  • 产品成本的计算公式
  • 品牌店设计费入什么费用
  • 代收代付水电费会计分录
  • 环境保护税的申报期限是如何规定的
  • mac怎么查询是不是正品
  • 笔记本如何进行截图
  • 电脑的c盘变红怎么回事
  • 如何弥补以前年假的问题
  • 汇算清缴审计报告收费标准
  • 如何认定坏账
  • kali linux怎么修改用户名
  • 工程结算和决算一样吗
  • 公司社保钱可以套出来吗
  • 经营租赁固定资产体现实质重于形式
  • 商场返现活动怎么入账
  • php变量函数
  • 热带雨林瀑布群雪野
  • framework架构
  • 公司日常流水账
  • 固定资产盘盈的账务处理
  • 帝国cms如何使用
  • 运输公司税务筹划
  • 坏账准备计提比例一般是多少
  • 财务报表怎么重新编制
  • 给中间人回扣犯罪吗
  • sql server 18486
  • sql server附加数据库出错
  • 销货退回的账务如何处理
  • 退款产生的手续费怎么算
  • 冲减备用金什么意思
  • 年初余额和期末余额对不上怎么办
  • 企业购买新能源车免购置税吗
  • 公司不做账不报税有什么后果?
  • 手机发票计入什么科目
  • 建筑企业工程施工科目怎么结转
  • Mysql 5.7.17 winx64免安装版,win10环境下安装配置图文教程
  • 启用5g后流量有什么影响
  • 硬盘安装64位win8.1/win8或win7操作系统图文教程
  • windows10周年更新
  • 苹果Mac系统怎么切换输入法
  • mac系统怎么查找文件
  • rrpcsb.exe - rrpcsb是什么进程 有什么用
  • Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您解决
  • linux怎么禁用用户
  • linux的命令行界面
  • win7系统安装不了软件怎么办
  • css动态网页
  • unity3d ide
  • node .js
  • bat批处理执行cmd命令
  • python+django
  • jsonp如何解决跨域问题
  • js中的div标签怎么用
  • jupyter 安装python包
  • js中overlay
  • 哈尔滨工业大学录取分数线2023年
  • 公司变更税务局
  • 现在哪个保险公司车险好
  • 公寓限购是好事吗
  • 从租计征房产税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设