React点击Link传参后读取location.state报未定义错误如何解决

1. 修改Link组件传递state参数 #

你当前的Link仅配置了跳转路径，没有携带state参数，所以跳转后目标组件根本无法读取到对应值，修改为对象格式的to属性即可隐藏携带参数，不会改变访问路径：

<TabPanel>
  <Dietracker dataFromParent={date} />
  <Link 
    to={{
      pathname: "/cdiet",
      state: { date: date }
    }}
  >
    <button onClick={this.closeTabBox}>edit</button>
  </Link>
</TabPanel>

2. 给目标组件注入路由属性 #

你报错Cannot read properties of undefined (reading 'state')的核心原因是CDietOverview组件没有被路由注入location等路由属性，根据你用的react-router版本选择对应方案即可：

若使用react-router v5 #

选任意一种方案即可：

• 方案A：修改路由配置，用component属性挂载组件

  <Route path="/cdiet" component={CDietOverview} />
  

• 方案B：给类组件包裹withRouter高阶组件
  先在CDietOverview文件导入对应API：

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

  修改导出逻辑：

  export default withRouter(Overview);
  

  你代码里导入的useLocation是Hooks API，仅能在函数组件中使用，类组件用不上可以删掉

若使用react-router v6 #

v6移除了withRouter，可以自行封装简易高阶组件适配类组件，在CDietOverview文件添加以下代码：

import { useLocation, useParams, useNavigate } from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const params = useParams();
    const navigate = useNavigate();
    return <Component {...props} location={location} params={params} navigate={navigate} />;
  }
  return ComponentWithRouterProp;
}

// 导出时包裹组件
export default withRouter(Overview);

3. 优化参数读取逻辑避免空值报错 #

如果用户直接访问/cdiet路径而非从你的Link跳转，state会是undefined，需要加兼容判断：

// constructor中修改为
const date = props.location?.state?.date;
// 不支持可选链的环境可以写为 const date = props.location && props.location.state && props.location.state.date;
console.log(date);

// componentDidMount中修改为
const date = this.props.location?.state?.date;
// 建议加判断，date存在再执行后续逻辑

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