React.js通过Link和Router传值失败，state为undefined如何解决

云上老周

2026-10-2

问题根因

路由组件未注入路由属性：直接嵌套在Route标签内的组件默认不会自动接收location、history等路由相关props，因此this.props.location本身可能为undefined，导致无法读取state值
非Link跳转场景无状态：如果用户直接在地址栏输入/cdiet、或者刷新/cdiet页面，路由携带的state会自动丢失，返回undefined

解决方案

如果你使用的是react-router v5

1. 给CDietOverview组件注入路由props，三选一即可：

方式1：修改路由配置，改用component属性关联组件

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

方式2：如果需要给组件传递额外自定义props，用render属性

<Route path="/cdiet" render={(routeProps) => (
  <CDietOverview {...routeProps} 自定义props={你的自定义值} />
)} />

方式3：不修改路由配置，用withRouter高阶组件包裹CDietOverview导出

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

class CDietOverview extends React.Component {
  // 原有组件逻辑不变
}
// 导出时用withRouter包裹
export default withRouter(CDietOverview);

2. 修改取值逻辑，增加默认值适配无state的场景

componentDidMount() {
  // 可选链 + 空值合并运算符，避免报错，仅从Link跳转时能拿到传入的date
  const date = this.props.location?.state?.date ?? 你需要的默认值（比如当前日期）;
  const config = {
    headers: {
      Authorization: `token ${localStorage.getItem("token")}`,
    },
  };
  // 后续业务逻辑使用date变量即可
}

如果你使用的是react-router v6

v6移除了component、render属性和withRouter，推荐优先将类组件改为函数组件，使用useLocation hook取值：

import { useLocation, useEffect } from 'react-router-dom';

function CDietOverview() {
  const location = useLocation();
  const date = location.state?.date ?? 默认值;

  useEffect(() => {
    const config = {
      headers: {
        Authorization: `token ${localStorage.getItem("token")}`,
      },
    };
    // 初始化业务逻辑
  }, [date])

  // 组件渲染逻辑
}

如果必须保留类组件，可以自行封装简易高阶组件将路由属性传入即可。

现有Link的写法本身已经符合要求：只有点击edit按钮触发跳转时才会携带date参数，其他方式进入/cdiet路由都不会拿到传入的date，只需要做好默认值兼容即可。

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