React Router传递State失效：登录后向Dashboard传邮箱失败

你遇到的类型错误，核心原因是this.props.location.state有可能是undefined，直接访问.email属性就会抛出类型错误。我来帮你拆解问题并给出可行的解决方案：

问题根源 #

React路由的state是存储在内存中的临时数据——当用户直接在浏览器地址栏输入/dashboard、刷新页面，或者通过书签访问该路由时，state会直接丢失，此时this.props.location.state就是undefined，自然无法读取.email属性。另外还要确认你的Dashboard组件是否正确接收了location和history props（如果组件不是直接通过路由配置渲染的，需要额外处理）。

分步解决方案 #

1. 先添加空值安全检查 #

修改Dashboard的componentDidMount方法，先判断state是否存在，再读取邮箱：

componentDidMount() {
  if (this.Auth.loggedIn()) {
    // 使用可选链操作符?.避免类型错误，同时可以 fallback 到Auth中的用户信息
    const userEmail = this.props.location.state?.email || this.Auth.getUserEmail();
    console.log(userEmail);
  } else {
    this.props.history.replace('/login');
  }
}

如果你使用的是较旧的JavaScript环境不支持可选链，可以换成条件判断：

const userEmail = (this.props.location.state && this.props.location.state.email) || this.Auth.getUserEmail();

2. 确保组件能获取路由props #

如果你的Dashboard组件不是直接在路由配置中定义的（比如是作为其他组件的子组件渲染），需要用withRouter高阶组件包裹它，这样才能拿到location、history等路由相关props：

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

class Dashboard extends React.Component {
  // ... 你的组件原有代码
}

// 用withRouter包裹后导出
export default withRouter(Dashboard);

3. 更可靠的用户信息传递方案 #

路由state只适合传递临时、非关键数据，用户邮箱属于用户核心信息，更推荐把它存在你的Auth类管理的存储中（比如localStorage或sessionStorage）：

• 登录成功时，除了存储token，顺便把邮箱也存起来：

// 登录页面的成功逻辑中
this.Auth.setToken(token);
this.Auth.setUserEmail(this.state.email); // 在Auth类中实现这个方法，存入localStorage

• 然后在Dashboard中直接从Auth获取，不需要依赖路由state：

componentDidMount() {
  if (this.Auth.loggedIn()) {
    console.log(this.Auth.getUserEmail()); // 直接从Auth读取，更稳定可靠
  } else {
    this.props.history.replace('/login');
  }
}

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