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

  • vivox70pro微云台怎么用(vivox70pro微云台防抖有用吗)

    vivox70pro微云台怎么用(vivox70pro微云台防抖有用吗)

  • 小米10s最高支持多少w快充(小米10s最高支持多少瓦快充)

    小米10s最高支持多少w快充(小米10s最高支持多少瓦快充)

  • 微信别人加不上我怎么回事(微信别人加不上我怎么办)

    微信别人加不上我怎么回事(微信别人加不上我怎么办)

  • b站私信有红色的感叹号(b站私信有红色的感叹号 别着急发图啊)

    b站私信有红色的感叹号(b站私信有红色的感叹号 别着急发图啊)

  • 美团转单是什么意思(美团转单是什么流程)

    美团转单是什么意思(美团转单是什么流程)

  • 华为荣耀x10什么时候发布(华为荣耀X10什么时候上市的)

    华为荣耀x10什么时候发布(华为荣耀X10什么时候上市的)

  • word给图片加水印的方法(word给图片加水印最简单的方法)

    word给图片加水印的方法(word给图片加水印最简单的方法)

  • win10卡顿嘟嘟嘟响声(电脑突然卡了然后嘟嘟嘟嘟嘟嘟)

    win10卡顿嘟嘟嘟响声(电脑突然卡了然后嘟嘟嘟嘟嘟嘟)

  • 苹果电脑装windows系统会有什么影响(苹果电脑装windows发烫)

    苹果电脑装windows系统会有什么影响(苹果电脑装windows发烫)

  • word文档怎么分享微信(word文档怎么分成四块)

    word文档怎么分享微信(word文档怎么分成四块)

  • mtk6771是什么处理器(mtk6771参数)

    mtk6771是什么处理器(mtk6771参数)

  • 快手改名字限制次数吗(快手改名字限制多久)

    快手改名字限制次数吗(快手改名字限制多久)

  • html标题居中怎么设置(html如何让文字居中)

    html标题居中怎么设置(html如何让文字居中)

  • 淘宝购物车能放多少商品(淘宝购物车能放多少宝贝)

    淘宝购物车能放多少商品(淘宝购物车能放多少宝贝)

  • 天猫魔盒复位键在哪里(天猫魔盒复位键没反应)

    天猫魔盒复位键在哪里(天猫魔盒复位键没反应)

  • 华为9i怎么添加信任应用(华为怎样添加)

    华为9i怎么添加信任应用(华为怎样添加)

  • tcl怎么看电视频道

    tcl怎么看电视频道

  • word怎么关闭兼容模式(word怎么关闭兼容)

    word怎么关闭兼容模式(word怎么关闭兼容)

  • 天猫小黑盒是啥意思(天猫小黑盒子是什么意思)

    天猫小黑盒是啥意思(天猫小黑盒子是什么意思)

  • 移动wifi怎么更改密码(移动wifi怎么更改名称)

    移动wifi怎么更改密码(移动wifi怎么更改名称)

  • r17是什么手机(R17是什么手机)

    r17是什么手机(R17是什么手机)

  • 电脑硬盘使用时间(电脑硬盘使用时间怎么查)

    电脑硬盘使用时间(电脑硬盘使用时间怎么查)

  • 信息删除了怎么找回(信息删除了怎么找回来)

    信息删除了怎么找回(信息删除了怎么找回来)

  • 使用vue,实现前端导入excel数据(vue前端怎么运行)

    使用vue,实现前端导入excel数据(vue前端怎么运行)

  • chfn命令  系统管理(命令行系统)

    chfn命令 系统管理(命令行系统)

  • Python中的描述符(python描述器有什么用)

    Python中的描述符(python描述器有什么用)

  • 工伤在门诊的收据能报销吗
  • 建筑公司劳务分包抵扣分录
  • 差额征税专用发票如何开
  • 如何做好服务 服务行业
  • 建筑公司收到劳务费
  • 合并报表时存货怎么处理
  • 物流企业差额征税
  • 债券分期还本利息怎么算
  • 个人去税务局开居间费发票
  • 存货自然灾害损失进项税
  • 营改增后转让土地使用权
  • 补交以前年度增值税和滞纳金怎么开票
  • 食堂费用计入应付职工薪酬吗
  • 集团统借统还利息
  • 红字专用发票信息表需要盖章吗
  • 母公司向分公司收取管理费
  • 京挑客怎么赚钱
  • 会议费 报销
  • 租入固定资产装修
  • 出口企业内销商怎么做
  • 金蝶核算项目明细表
  • vue播放器
  • 委外加工的加工费的会计处理
  • 【免费】多种方法手把手教你如何将自己做的网页做成网络链接(直接访问)
  • win11安卓子系统教程
  • 教育培训费能抵扣吗
  • window10发现威胁怎么办
  • 银行贷款发放怎么做凭证
  • 代理进口合同如何签署
  • php教程 ftp 函数
  • 良心推荐博主
  • 乌鲁米耶湖春季湖水更深
  • 营改增后固定资产报废处置收入计税
  • PHP:mcrypt_module_get_algo_block_size()的用法_Mcrypt函数
  • javascript语言基础
  • php数组实现
  • imu模型
  • 专利收费的职能包括
  • 网站更换域名后无法访问
  • 补交上年度的企业所得税税款计入什么科目
  • 零售行业bi
  • 房产税从租和从价都要交吗
  • 企业自产自用的产品需要缴纳增值税吗
  • 企业捐赠自产产品的所得税处理
  • 资产负债表是怎么核对的
  • 长期待摊费用好处
  • 现金日记账采用哪一种账簿的形式
  • 房屋开发企业
  • 国库集中支付业务包括哪些
  • 股票质押式回购交易是什么意思
  • 产权转移数据印花税子目
  • 收到代持股权的账务处理
  • 应扣未扣税款对纳税人的处理
  • 居民企业只就其境内全部所得纳税
  • 一次性伤残补助金是单位给的还是社保给的
  • 租赁费属于酌量性固定成本
  • 残保金管理使用办法
  • 环境检测费属于什么费用
  • 主营业务收入多栏式明细账怎么登
  • 在linux中使用哪个命令可以用于管理用户账户
  • swimsuitnetwork.exe - swimsuitnetwork是什么进程 有何作用
  • ctl.start
  • 基于centos6安装kvm服务
  • win10系统如何更改盘符
  • linux计划任务每天执行一次
  • 用于播放html5视频文件的正确
  • python 编码声明
  • 批处理/a
  • dos常用命令与批处理文件
  • nodejs入门教程
  • 用javascript
  • Unity之megaFierstext翻书插件控制代码分析
  • jquery页面
  • jquery实现倒计时效果
  • 南京电子税务局咨询电话
  • 200平交多少契税
  • 进口设备需要资质吗
  • 税务备案表的有效期
  • 河南税务局退税流程
  • 汽车维修费税率是13还是6
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设