关于umi中使用Link传参方式的理解

今天在项目中发现Link传参的方式出现了两种,一种使用state。另一种使用umi官方示例的写法,虽然两种方法都能实现参数的传递,但在history.back()时,在谷歌浏览器和Safari浏览器上出现了state丢失问题,在火狐浏览器上没有发现。附上代码写法:

使用state写法:

{text}
取值:let orgType = this.props.location.state.typeId;

umi官方写法:

{text}
取值:this.props.location.query.documentQuery

针对这个问题,我进行了一些了解,umi的Link来源于react-router-dom,而react-router-dom是对react-router的封装,根据《深入理解React技术栈》一书中对于React Router特性的描述,当location发生变化的时候,会触发重新绘制View的操作。

当history.back()执行时,location发生变化,state被重置,当重新绘制View时,从state中取值的操作将会发生错误。

官方写法的参数是放在props中,根据书中对于props的描述,props本身是不可变的,故此写法比state的写法更为保险。

你可能感兴趣的:(前端学习)