位置: 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漏洞扫描器的设计与实现)

  • wifi已连接不可上网是什么原因呢(wifi已连接不可上网是什么原因)(wifi已连接不可上网是什么原因电脑)

    wifi已连接不可上网是什么原因呢(wifi已连接不可上网是什么原因)(wifi已连接不可上网是什么原因电脑)

  • 蓝牙耳机线断了可以修吗(蓝牙耳机线断了怎么焊接)

    蓝牙耳机线断了可以修吗(蓝牙耳机线断了怎么焊接)

  • 手机文档怎么插照片(手机怎么建文档)

    手机文档怎么插照片(手机怎么建文档)

  • ps通道怎么用

    ps通道怎么用

  • gt750显卡什么水平(gt750i显卡)

    gt750显卡什么水平(gt750i显卡)

  • 小米10pro有红外吗(小米10pro红外线功能在哪里)

    小米10pro有红外吗(小米10pro红外线功能在哪里)

  • 电源带不起显卡的特征(电源带不起显卡会出现什么情况)

    电源带不起显卡的特征(电源带不起显卡会出现什么情况)

  • airpods2怎么重启(airpods2怎么重启配对)

    airpods2怎么重启(airpods2怎么重启配对)

  • vivox30是真5g手机吗(vivox30支持的5g频段)

    vivox30是真5g手机吗(vivox30支持的5g频段)

  • 小爱同学触屏版可以安装软件吗(小爱同学触屏版怎么下载应用)

    小爱同学触屏版可以安装软件吗(小爱同学触屏版怎么下载应用)

  • 数据库系统管理数据的特点(数据库系统管理软件)

    数据库系统管理数据的特点(数据库系统管理软件)

  • 手机插上耳机有声音拔掉没有了是什么原因(手机插上耳机有滋滋的声音是手机的问题吗)

    手机插上耳机有声音拔掉没有了是什么原因(手机插上耳机有滋滋的声音是手机的问题吗)

  • 京东退款能不能取消(京东退款能不能加速审核)

    京东退款能不能取消(京东退款能不能加速审核)

  • 淘宝不支持7天能退款吗(淘宝不支持7天无理由退换)

    淘宝不支持7天能退款吗(淘宝不支持7天无理由退换)

  • 微信群聊名称修改(微信群聊名称修改后又变回去)

    微信群聊名称修改(微信群聊名称修改后又变回去)

  • vivo27pro有红外线吗(vivox27有红外线)

    vivo27pro有红外线吗(vivox27有红外线)

  • 美团众包如何快速抢单(美团众包如何快速接顺路单)

    美团众包如何快速抢单(美团众包如何快速接顺路单)

  • 怎么把抖音号遮掉(怎么把抖音号遮住视频)

    怎么把抖音号遮掉(怎么把抖音号遮住视频)

  • 手机app是什么(哈佛h6手机app是什么)

    手机app是什么(哈佛h6手机app是什么)

  • 进入英雄联盟显示超出范围怎么办?解决方法(进入英雄联盟显示超频怎么办)

    进入英雄联盟显示超出范围怎么办?解决方法(进入英雄联盟显示超频怎么办)

  • 在Win7系统中,开机启动项太多怎么办?(在win7系统中将打开窗口拖到屏幕顶端)

    在Win7系统中,开机启动项太多怎么办?(在win7系统中将打开窗口拖到屏幕顶端)

  • Java学习-第一部分-第二阶段-第六节:泛型(java初学者教程)

    Java学习-第一部分-第二阶段-第六节:泛型(java初学者教程)

  • 实现dedecms织梦搜索全文检索的方法(织梦开发教程)

    实现dedecms织梦搜索全文检索的方法(织梦开发教程)

  • 个体户是否属于免征纳税对象是什么意思
  • 兼职是属于劳动报酬吗
  • 电梯广告租赁属于哪类
  • 已经认证的发票对方可以作废吗
  • 已付款收不到发票怎么办
  • 广告制作可以开什么发票
  • 运输费用和保险费用会计分录
  • 呆账的处理
  • 多计提的销售费用冲销
  • 投入的资金计入什么科目
  • 以物易物方式销售货物例题
  • 白酒出口税收
  • 2021年营业额多少需要交税
  • 出纳能办理涉税实名认证吗?
  • 企业一次性补助金是多少标准
  • 多付工资计入哪个科目
  • 卖菜公司有税务优惠吗
  • 企业职工教育经费计入什么科目
  • 免征的税额当月计入营业外收入吗
  • 资询服务收入算服务还是劳务
  • 盈余积累转增资本的条件
  • 0xc0000142怎么修复
  • 关于暂时性差异的所得税会计处理,正确的是
  • mac系统10.10
  • 你知道怎么安装
  • 车船税的会计分录怎么写
  • 股权无偿赠与协议书范本
  • Windows 11 CO-21H2 22000.194 正式版官方下载地址(附esd微软三语直链下载x64+arm64)
  • 建筑业预缴企业所得税是分季预缴按年抵减吗
  • u盘数据全部丢失
  • 利润分配弥补亏损会计分录
  • 机关事业单位体检费用标准规定
  • phppdo连接数据库
  • 层层剖析的近义词
  • 大前端最新
  • php高级程序招聘
  • 残保金如何缴纳残疾人工资如何扣除
  • 月末制造费用可以有余额吗
  • 红字发票信息表填好后再怎么操作
  • 支付的劳务费是什么意思
  • 如何查询去年企业所得税
  • python replace 多个
  • 织梦cms怎么样
  • c语言中使用指针的好处
  • html前端开发教程
  • MongoDB的mongo shell常用操作方法及操作脚本笔记
  • 车改补贴算工资吗
  • 提供学历教育服务取得收入免征增值税的有
  • 物业代收代缴是什么意思
  • 待处理财产损益是备抵类科目吗
  • 企业出租经营权是否征税
  • 计提医疗保险费的会计分录
  • 合作研究开发项目的合同
  • 生产出口退税企业有哪些
  • 二手市场机械设备
  • 收到预付卡的发票是否可以报销呢?
  • 汇算清缴晚了几天
  • 律师费能计入办公费吗合法吗
  • 技术研发费用是什么意思
  • 减免所得税优惠政策
  • sql server默认实例
  • 电脑显示配置windows
  • office技术预览版和增强版
  • xp系统好怪啊
  • centos编译器
  • xp系统硬盘管理
  • sxs.exe病毒
  • win102020h2版本
  • xp系统如何取消开机自动启动程序
  • linux halting
  • python模拟reversed功能
  • python函数enumerate
  • bootstrap3中container与container_fluid外层容器的区别讲解
  • js模拟touch
  • mybatis框架执行流程
  • 仿百度首页html代码静态
  • 企业吸收合并资质
  • 电子发票提取网站
  • 内蒙古国家税务总局官网
  • 龙岗区龙岗税务局地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设