「都是url惹的祸」(问题:小数点参数被截取|刷新页面找不到资源)

在前端开发中,使用HashRouter刷新页面时,路由state参数丢失,且URL包含小数点的参数会被截取。解决方案包括切换到BrowserRouter,调整参数位置,或在末尾添加斜杠。

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

问题背景:

        在开发的时候有个页面跳转的需求点并且需要带着五个参数飞过去,其中包含版本号(就是有小数点的数字,这也是遇到的一个问题一会聊一哈),本来触发完事件横跳过去没有问题,寻思着看一下Network看看接口数据,所以就刷新了一下,就在这个时候问题来个。我页面不见了,甚至还在报错,找不到资源。

 问题原因:

    经过跟谷子哥的一番深入交流后得到的结果是:

  • HashRouter刷新后会导致路由state参数的丢失!!!(大家应该都知道,哈希刷新参数丢失,当时我没有想到这个点上)

  附上链接:react-router-dom 的 HashRouter 也就这么回事儿 - SegmentFault 思否         

   但是一想也不对呀参数丢就丢了为啥直接找不到资源了呢,就很奇怪。看着一堆代码开始思考人生,突然看到这个东西 「这样写的话参数丢了还能找到资源那才奇了个怪呢」。

path="/demo/test/:name/:age"

  这个属于params参数中的  注册路由( 声明接收 )!!!(大家都会吧!)

params参数
路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
接收参数:this.props.match.params

 解决问题:

哈希路由刷新参数丢失的问题其实换成 BrowserRouter  就可以了(这才多大点事呢)

附上链接:聊聊BrowserRouter的内部实现 - 知乎 

但是开始就说了参数中有小数点这个问题了(如果说哈希刷新会丢失参数是我大意没想到这个点,那这个问题我是真的不会,也没遇到过)  

     其实以前的开发中路由传参包含有小数的参数也传过但是没有遇到这种问题,这次可能是冥冥之中早有安排(逼着我前进呀) 

问题原因: 

在用url进行传参时,小数参数后边的小数值被截取掉了!!!

我当时的参数:/mid/36502/invoiceAmount/125.25
获取到的参数:invoiceAmount=125

解决问题:

方案一:设置伪静态后缀

浏览器会把伪静态后缀去掉,如果小数参数不放在最后就没问题。(这个办法我也没试过)

方案二:把带有小数的参数放在中间,不能放在最后边(不放在最后就不会把小数点后面的值当作静态后缀去掉了)

例如:http://192.168.1.5/mid/36502/invoiceAmount/125.25

改为:http://192.168.1.5/invoiceAmount/125.25/mid/36502

方案三:在参数最后面多加一个 / 也是行的

我用的是第二种方法(因为简单😜) !!!

文章是自己记录一下(写的很水没有啥高质量营养,如果有写的不对的地方留言我,我会偷偷改掉,感谢!!!)

愿路过的大佬平安喜乐

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值