ReactJS私有路由跳转登录时出现TypeError: Cannot read property 'from' of undefined

嘿，这个问题我之前也碰到过！原因很简单——当用户直接访问登录页（比如手动输入URL或者从非私有路由跳转过来）时，location.state根本就不存在，所以你直接去取this.props.location.state.from自然就会触发“Cannot read property 'from' of undefined”的错误啦。

修复方案：增加存在性检查 #

你只需要在访问from之前，先判断location.state和from是否存在，同时可以设置一个默认的跳转路径（比如首页/），这样无论用户是从私有路由跳转过来，还是直接访问登录页，都不会报错。

修改你的componentWillReceiveProps代码如下：

componentWillReceiveProps(nextProps) {
  if (nextProps.apiData !== this.props.apiData && nextProps.apiData !== false) {
    // 可选链语法（ES2020+）：安全访问嵌套属性，不存在则返回undefined
    const redirectPath = this.props.location.state?.from?.pathname || '/';
    // 执行跳转逻辑，比如用history.push
    this.props.history.push(redirectPath);
  }
}

如果你的项目环境不支持可选链语法（?.），可以用传统的多层判断：

componentWillReceiveProps(nextProps) {
  if (nextProps.apiData !== this.props.apiData && nextProps.apiData !== false) {
    let redirectPath = '/';
    // 逐层检查属性是否存在
    if (this.props.location.state && this.props.location.state.from && this.props.location.state.from.pathname) {
      redirectPath = this.props.location.state.from.pathname;
    }
    this.props.history.push(redirectPath);
  }
}

额外建议：使用React生命周期新API #

另外要注意，componentWillReceiveProps在React 16.3版本之后已经被标记为过时（deprecated）了，如果你的项目使用的是较新的React版本，建议改用componentDidUpdate来处理props变化的逻辑，代码示例如下：

componentDidUpdate(prevProps) {
  // 对比props变化
  if (this.props.apiData !== prevProps.apiData && this.props.apiData !== false) {
    const redirectPath = this.props.location.state?.from?.pathname || '/';
    this.props.history.push(redirectPath);
  }
}

这样不仅能解决错误，还能遵循React的最新最佳实践哦！

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