this.props.location.state刷新为undefined-CSDN博客

本文链接：https://blog.csdn.net/zm_miner/article/details/105245757

在React应用中，从a页面跳转到b页面并使用state传递参数，当在b页面刷新时，`this.props.location.state`变为undefined。问题源于使用了HashRouter，而BrowserRouter则不会出现此问题。可通过sessionStorage作为替代方案，将对象转换为JSON字符串进行存储和接收，以确保刷新后数据仍然可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a页面跳转到b页面, 通过state传参

a页面

 this.props.history.push({
      pathname: `/chunan-my-declare-detail`,
      state: {
        record,
        takenCount: record.takenCount,
        takenTicketTime: record.takenTicketTime,
        policyCode: this.state.policyCode,
        legalPersonName: this.state.farenData.legalPersonName,
        legalPersonPhone: this.state.farenData.legalPersonPhone,
      }
    });

b页面接收
this.props.location.state

在这里插入图片描述

当我刷新当前页面时 this.props,location.state为undefined
在这里插入图片描述

???

查了一下发现,是使用 HashRouter的原因, 如果是BrowserRouter就不会出现这个问题,这两个各有各的优势和劣势具体没去了解

另一种解决方式使用 sessionStorage

 const { location } = this.props
    let takenTicketTime = '';
    let takenCount = '';
    let policyCode = '';
    let legalPersonName = '';
    let legalPersonPhone = '';
    // let farenData = {};

    if (location.state) {
      takenTicketTime = location.state.takenTicketTime;
      sessionStorage.setItem('takenTicketTime', takenTicketTime);
      takenCount = location.state.takenCount;
      sessionStorage.setItem('takenCount', takenCount);
      policyCode = location.state.policyCode;
      sessionStorage.setItem('policyCode', policyCode);
      legalPersonName = location.state.legalPersonName;
      sessionStorage.setItem('legalPersonName', legalPersonName);
      legalPersonPhone = location.state.legalPersonPhone;
      sessionStorage.setItem('legalPersonPhone', legalPersonPhone);
    } else {
      takenTicketTime = sessionStorage.getItem('takenTicketTime');
      takenCount = sessionStorage.getItem('takenCount');
      policyCode = sessionStorage.getItem('policyCode');
      legalPersonName = sessionStorage.getItem('legalPersonName');
      legalPersonPhone = sessionStorage.getItem('legalPersonPhone');
    }
    this.setState({
      policyCode,
      takenCount,
      takenTicketTime,
      legalPersonName,
      legalPersonPhone,
    })

传递和接收的值是对象{}的话使用
sessionStorage.setItem('params', JSON.stringify({a:1, b: 2})); 值转换为 JSON 字符串
JSON.parse(sessionStorage.getItem('params')) JSON 字符串转换为对象