路由跳转后需要两次调用goback才能正常返回

在React应用中,使用router.push进行页面跳转时,通过a标签跳转编辑页面会额外添加#号到URL,导致需要两次goBack才能返回。本文分析了问题原因并提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

react中使用router.push("/createForm")进行路由跳转,表单创建完成后,使用router.goBack()返回页面。
创建页面可以正常返回列表页面,但是编辑页面需要调用两次router.goBack()才可以返回列表页面。
编辑页面和新增页面的跳转路由地址相同,跳转方法相同

技术栈:react+umi+dva+antd

问题解决过程

step 1

多次操作两个页面观察不同之处,
发现编辑页面的路由地址为http://localhost:8000/exposure-draft-create#
新增页面的路由地址为http://localhost:8000/exposure-draft-create
编辑页面地址后多了一个#,第一次调用router.goBack()#号去除,第二次调用router.goBack()正常返回了列表页面

step 2

探寻#号的来源

  1. 搜索引擎搜索“router #”,无结果
  2. 代码中寻找跳转编辑页面和新增页面的不同之处
  3. 两个页面跳转路由地址相同(控制台打印路由均无#号),跳转方法使用了相同的函数
  4. 寻找调用跳转函数的HTML
    跳转编辑页面
 <div className={styles.details}>
          <span>
            <a
              onClick={() => this.toEditPage(id, conferenceType)}
              href="#"
              style={{ padding: 0 }}
            >
              编辑
            </a>
          </span>
 </div>

跳转创建页面

<div className={styles.createMeeting}>
          <Button type="button" onClick={() => this.toCreatPage()}>
            {formTestObject.buttonText}
          </Button>
</div>

问题出现原因

使用a标签添加属性href="#"跳转路由地址会加上#

问题解决方案

去除’href="#"‘属性

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值