React路由history.push传state到目标页报undefined错误如何解决

抛出TypeError: undefined has no properties是因为读取this.props.location时，这个值本身为undefined，根本不是路由注入的合法location对象，触发问题的常见原因共3个：

• 跳转函数存在语法错误：贴出的eCE函数末尾多了冗余的)闭合符号，会导致函数执行逻辑异常
• 调用push方法的history实例，和项目路由挂载绑定的history实例不是同一个，跳转没有触发正确的路由上下文更新
• 目标页面组件没有被React Router的高阶组件包裹，路由相关的props（location/history/match）根本没有注入到组件实例中

另外补充一个容易遗漏的场景：如果用户直接在地址栏输入目标路径刷新进入页面，路由state本身就不存在，没有做空值兜底也会触发报错。

1. 修正跳转函数语法错误 #

删掉函数末尾多余的闭合符号，修正后代码：

function eCE(eventData) {
  history.push({
    pathname: '/ece',
    state: eventData
  })
}

2. 统一使用路由上下文提供的history实例 #

不要单独从外部引入自定义的history实例做跳转，优先使用组件props里注入的history对象，避免实例不匹配的问题：
如果跳转逻辑写在类组件内部，直接调用this.props.history即可：

eCE = (eventData) => {
  this.props.history.push({
    pathname: '/ece',
    state: eventData
  })
}

3. 给目标页面注入路由Props #

如果目标页是React Router v5的类组件，必须用withRouter高阶组件包裹导出，才能拿到路由注入的props：

import { withRouter } from 'react-router-dom'

class EcePage extends React.Component {
  componentDidMount() {
    // 加空值兜底，兼容直接刷新页面state不存在的场景
    const { state } = this.props.location || {}
    console.log('接收的路由参数：', state)
  }
  // 其余业务逻辑
}

// 必须包裹withRouter再导出
export default withRouter(EcePage)

如果项目用的是React Router v6，类组件无法直接拿到路由props，可以自己封装高阶组件注入，或者直接用函数组件+官方钩子取参：

import { useLocation } from 'react-router-dom'

const EcePage = () => {
  const { state } = useLocation() || {}
  console.log('接收的路由参数：', state)
  return <div>/ece 页面内容</div>
}

export default EcePage

提示：路由state存储在内存里，只要页面刷新就会丢失，如果是需要持久化的参数，不要用state传递，改成url参数、sessionStorage存储更稳妥。

内容的提问来源于stack exchange，提问作者devdude19289