今天在项目中发现Link传参的方式出现了两种,一种使用state。另一种使用umi官方示例的写法,虽然两种方法都能实现参数的传递,但在history.back()时,在谷歌浏览器和Safari浏览器上出现了state丢失问题,在火狐浏览器上没有发现。附上代码写法:
使用state写法:
<Link to={{pathname:`/breakpromise-manager/${record.id}/detail`,state:{typeId:record.orgType}}}>{text}</Link>
取值:let orgType = this.props.location.state.typeId;
umi官方写法:
<Link to={`/official-manager/${record.id}/detail?documentQuery=${this.props.location.query.documentQuery}`}>{text}</Link>
取值: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的写法更为保险。