React中获取路由传递的location.state单字段报错undefined的解决方法

报错的核心原因 #

你遇到的“打印整个location.state正常，取a字段就报undefined”的问题，是React Router传参非常常见的踩坑点，原因主要有两个：

1. history.push里携带的state是浏览器内存级的临时数据，不是持久化存储：
   • 从源页面跳转进入home页时，state会正常挂载在location对象上，所以你打印整个state能看到a/b/c三个字段
   • 但如果用户直接在地址栏输入/home路径、刷新home页面、从外部链接打开home地址，这时候this.props.location.state的值会直接变成null，这时候直接访问.a属性就会触发空值报错
2. 测试场景不全面：你之前看到能打印出内容的场景，刚好是从其他页面跳转进入的状态，没有覆盖刷新、直接访问的场景，所以误以为state是一直存在的。

正确的取值和防御方案 #

• 取值前必须做空值兜底校验，从根源上避免空对象读属性的报错，示例代码：

componentDidMount() {
  // 用可选链逐层判断，避免空值报错
  const passedState = this.props?.location?.state;
  // 只有state存在且a字段存在时再做后续逻辑
  if (passedState?.a !== undefined) {
    const aValue = passedState.a;
    // 在这里写你要使用a字段的业务逻辑
    console.log('获取到的a字段值：', aValue);
  } else {
    // 兜底逻辑：参数不存在时跳转回来源页、或者给a设置默认值
    console.warn('未从路由跳转获取到传递的参数，触发兜底逻辑');
  }
}

• 如果需要参数在刷新、直接访问页面的场景下也能正常获取，不能只依赖内存型的路由state，需要搭配其他方案：
  • 非敏感参数可以转为路由查询参数传递，比如跳转时把参数拼在路径后：this.props.history.push('/home?a=值&b=值')，目标页通过解析this.props.location.search取值，参数不会随页面刷新丢失
  • 敏感参数不想暴露在地址栏的，可以在跳转前把参数写入sessionStorage，目标页面读取到参数后做清理操作，即便页面刷新也能从存储中读到之前传递的值
• 额外排查项：如果加了空值校验依然取不到值，可以把整个this.props.location对象打印出来，确认项目的路由封装、嵌套路由有没有把state挂载到其他层级的属性上，避免取错路径导致的读取失败。

注意：内存型的路由state本身的设计场景就是用于短周期的页面间传参，本身就不支持跨刷新、直接访问的持久化读取，所有依赖这个属性的业务都必须加兜底逻辑，否则遇到空值场景一定会报错。

内容的提问来源于stack exchange，提问作者B.Y.