位置: IT常识 - 正文

React路由跳转的几种方式(reactjs路由跳转)

编辑:rootadmin
React路由跳转的几种方式

目录

React路由跳转的几种方式

1. params形式,路由跳转后,参数会显示在地址栏

 2. 使用state的形式,页面刷新不会丢失数据,并且地址栏也看不到数据


React路由跳转的几种方式

推荐整理分享React路由跳转的几种方式(reactjs路由跳转),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react路由传值的几种方法,react 路由跳转,react路由跳转刷新页面,reactnative路由跳转,reactnative路由跳转,react路由跳转导致重新渲染,react路由跳转导致重新渲染,reactjs路由跳转,内容如对您有帮助,希望把文章链接给更多的朋友!

注意: 这里使用的react-router-dom是版本5以上,路由形式是history模式react-router-dom文档地址,其中依赖包history的github地址

1. params形式,路由跳转后,参数会显示在地址栏

React路由跳转的几种方式(reactjs路由跳转)

        跳转的方法是使用history.push({pathname: '/personal', search: 'test=22222'}),其中search键对应的值就是拼接在地址栏的数据

import React from 'react'import { useHistory } from 'react-router-dom'export default ()=> {const history = useHistory()// 页面跳转方法history.push({pathname: '/personal', search: 'test=22222'})return 123}

        接收的方法。数据都是存储在useLocation中的search获取

import React from 'react'import { useLocation } from 'react-router-dom'export default ()=> {const location = useLocation()// 页面跳转方法console.log(location, 'props')return 123}

 2. 使用state的形式,页面刷新不会丢失数据,并且地址栏也看不到数据

     跳转的方法是使用history.push({pathname: '/personal', state: {test: 'dashboard'}}),其中search键对应的值就是拼接在地址栏的数据

import React from 'react'import { useHistory } from 'react-router-dom'export default ()=> {const history = useHistory()// 页面跳转方法history.push({pathname: '/personal', state: { test: 'dashboard' }})return 123}

        接收的方法。数据都是存储在useLocation中的search获取

import React from 'react'import { useLocation } from 'react-router-dom'export default ()=> {const location = useLocation()// 页面跳转方法console.log(location, 'props')return 123}

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

上一篇:在浏览器集成AI(chatgpt、new bing、bard )的必备扩展插件(浏览器集成什么意思)

下一篇:Web漏洞扫描器-Xray使用方法(web漏洞扫描器的设计与实现)

  • 小米手机拼图功能在哪里(小米手机拼图功能怎么用)

    小米手机拼图功能在哪里(小米手机拼图功能怎么用)

  • 屏蔽微信群消息但不退出群的方法是什么(屏蔽微信群消息后有人@我可以看到吗)

    屏蔽微信群消息但不退出群的方法是什么(屏蔽微信群消息后有人@我可以看到吗)

  • 华为手机耳机没声音怎么办(华为手机耳机没有声音是怎么回事)

    华为手机耳机没声音怎么办(华为手机耳机没有声音是怎么回事)

  • 华为nova5第二个微信怎么下载(华为nova5第二个系统怎么进)

    华为nova5第二个微信怎么下载(华为nova5第二个系统怎么进)

  • 西瓜视频有没有电视版(西瓜视频有没有极速版)

    西瓜视频有没有电视版(西瓜视频有没有极速版)

  • 使用鼠标拖动法复制选定单元格时需要按住什么键(使用鼠标拖动法,复制或移动文件时)

    使用鼠标拖动法复制选定单元格时需要按住什么键(使用鼠标拖动法,复制或移动文件时)

  • 苹果11收到微信不响怎么办(苹果11收到微信没有声音)

    苹果11收到微信不响怎么办(苹果11收到微信没有声音)

  • 40g云盘空间是什么(40g云盘空间是什么意思)

    40g云盘空间是什么(40g云盘空间是什么意思)

  • 腾讯会议能回放吗(腾讯会议能回放吗怎么样回看手机)

    腾讯会议能回放吗(腾讯会议能回放吗怎么样回看手机)

  • qq出现解除关系和加为好友(qq解除关系是什么意思消息发不出去)

    qq出现解除关系和加为好友(qq解除关系是什么意思消息发不出去)

  • 微信打标会自动取消吗(微信打标是什么情况)

    微信打标会自动取消吗(微信打标是什么情况)

  • ios网易云音乐云盘在哪(iphone网易云音乐)

    ios网易云音乐云盘在哪(iphone网易云音乐)

  • 充电器输出5v=2a是什么意思(充电器输出5v=2a是多少瓦)

    充电器输出5v=2a是什么意思(充电器输出5v=2a是多少瓦)

  • 电脑丢失文件怎么找回(电脑丢失文件是什么情况)

    电脑丢失文件怎么找回(电脑丢失文件是什么情况)

  • 对方限制登录能看朋友圈吗(对方限制登陆)

    对方限制登录能看朋友圈吗(对方限制登陆)

  • 苹果耳机进水了保修吗(苹果耳机进水了声音变小了)

    苹果耳机进水了保修吗(苹果耳机进水了声音变小了)

  • 阿里云域名怎么续费(阿里云域名怎么转给别人)

    阿里云域名怎么续费(阿里云域名怎么转给别人)

  • oppok3什么时候上市(oppok3什么时候上市的手机怎么知道?)

    oppok3什么时候上市(oppok3什么时候上市的手机怎么知道?)

  • 苹果六怎么录屏(苹果6怎么录屏)

    苹果六怎么录屏(苹果6怎么录屏)

  • 快手本地作品集别人能看到吗(快手本地作品集没有了,怎么恢复)

    快手本地作品集别人能看到吗(快手本地作品集没有了,怎么恢复)

  • 全球购怎么开店(拼多多全球购怎么开店铺)

    全球购怎么开店(拼多多全球购怎么开店铺)

  • vivo手机qq黑名单在哪(vivo手机扣扣黑名单在哪里?)

    vivo手机qq黑名单在哪(vivo手机扣扣黑名单在哪里?)

  • OPPO手机如何开启开发者功能(oppo手机如何开空调)

    OPPO手机如何开启开发者功能(oppo手机如何开空调)

  • 如何隐藏wifi名称(如何隐藏wi-fi名称)

    如何隐藏wifi名称(如何隐藏wi-fi名称)

  • HuggingFace简明教程

    HuggingFace简明教程

  • vue中动态添加style样式的几种写法总结(vue中动态添加表格)

    vue中动态添加style样式的几种写法总结(vue中动态添加表格)

  • 一般纳税人是否可以开普票
  • 税收的本质是什么意思?
  • 发票专用章盖在收据上有法律效益
  • 同一笔业务可以开多张发票吗
  • 税务筹划有哪些内容
  • 冲销去年暂估费用
  • 收款费用明细表
  • 费用计提后冲减怎么做账
  • 机构账户炒股是卖出后缴税么
  • 利息股息红利个税如何计算
  • 负利润需要交所得税吗
  • 增值税发票单位可以不填吗
  • 技术转让所得减去成本吗
  • 月收入不超10万减免 具体分销售额吗
  • 专业做电热水器哪些品牌
  • 无租使用房产如何征收企业所得税
  • 如何准确区分不动产租赁和仓储服务?
  • 一般纳税人问题
  • 开房租发票交的税,因优惠政策退税,怎么账务处理
  • win10专业版用户名和密码怎么取消
  • 销售人员领用材料
  • 公司并购的税务处理办法
  • 1.exe是什么文件
  • 跨年的发票作废重新开具需要入账
  • 目前超频最高几ghz
  • php用法
  • 公司收到投资款怎么写收据?
  • 微信公众号实现对应查询
  • php 输出字符串中字符的所有组合
  • win11显卡驱动不兼容
  • Js模板字符串添加点击事件
  • 图像识别算法汇总表
  • linux 运行php
  • 帝国cms怎么上传图片
  • 免税后的商品有什么优势?
  • 帝国cms商城源码
  • 公司给部分员工长期停工怎么办
  • 资本成本在财务报表中怎么体现
  • 现金折扣的账务处理最新
  • 企业固定资产如何查询
  • 个人所得税的征收模式为()A分类征收B
  • 以前年度损益调整结转到本年利润吗
  • 广告牌制作加盟厂家
  • 银行汇票的会计处理过程分为什么阶段
  • 公司给员工租的房子计入什么科目
  • 城镇土地使用税征收标准及计算方法
  • 发票与销售小票有什么区别?
  • 低值易耗品费用计入产品成本的方式有哪几种
  • 工作失误扣工资的规定是什么
  • 银行代发工资业务收费吗
  • 公司购买车
  • 销售费用的主要科目
  • 金税服务费发票哪里打印
  • 资产负债表月报的期初余额填什么
  • etc发票当天可以打印吗
  • 密码区出框
  • sql server错误和使用情况报告
  • mysql优化实战
  • sqlserver日期范围
  • windows10取消fn功能键
  • 如何解决win10系统用户名有中文
  • win8切换管理员账户
  • win7如何设置鼠标
  • centos安装总结
  • win7怎么开不了机
  • windows10 14393版本
  • 搭建nodejs
  • 批处理应用实例
  • js数字跳动增加效果
  • 简述jQuery ajax的执行顺序
  • jquery升级
  • 深入理解python特性
  • javascript新手教程
  • jquery input
  • jquery实现动画
  • genymotion-unable to load virtualbox engine
  • 广东省国家税务总局稽查局局长
  • 辽宁税务局代码是多少
  • 烟叶税计税依据是收购烟叶实际支付的价款总额
  • 上海市办居住证流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设