问题描述:在开发过程中,使用history.push中的state传参,页面中使用props.location.state接收参数,在开发环境中,没有问题,当在服务器端部署上线时,发现在页面中使用state接收的参数,在浏览器刷新之后丢失,导致页面报错
history.push({
pathname: '/projectFile',
state: {
id: res?.data?.project?.id,
projectName: projectInputValue,
},
});
解决办法:在页面跳转拿到参数之后,将参数保存到sessionStorage中,浏览器在后续拿数据从sessionStorage中获取,完美解决
let urlData: any;
if (props.location.state) {
urlData = props.location.state;
sessionStorage.setItem('urlData', JSON.stringify(urlData));
} else {
urlData = JSON.parse(sessionStorage.getItem('urlData'));
}