问题背景:
在开发的时候有个页面跳转的需求点并且需要带着五个参数飞过去,其中包含版本号(就是有小数点的数字,这也是遇到的一个问题一会聊一哈),本来触发完事件横跳过去没有问题,寻思着看一下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
方案三:在参数最后面多加一个 / 也是行的
我用的是第二种方法(因为简单😜) !!!
文章是自己记录一下(写的很水没有啥高质量营养,如果有写的不对的地方留言我,我会偷偷改掉,感谢!!!)
愿路过的大佬平安喜乐