umi+react开发中,使用history.push中的state传参,接收参数的页面在项目部署到服务器后,刷新页面参数丢失报错怎么办?

问题描述:在开发过程中,使用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'));
  }

猜你喜欢

转载自blog.csdn.net/znhyXYG/article/details/129661754