React组件间通过Link传参报错：TypeError: props is undefined

问题场景 #

我尝试用React Router的Link组件传递数据，代码如下：

传递数据的代码：

// 场景1
<Link to={{
          pathname: `payment/${id}`,
          state: {
            data: data,
          },
        }}>

// 场景2：结合useState
const [inputs, setInputs] = useState({
    description: "",
    startDate: "",
    endDate: "",
  })

// 更新状态
setInputs({
  description: inputs.description,
  startDate: startDate,
  endDate: endDate,
})

// 跳转传参
<Link to={{
          pathname: `/caravan-rezerve/ek-urunler/${id}`,
          state: {
            data: inputs,
          },
        }}>

接收数据时写了：

const { data } = this.props.location;

结果报错：TypeError: props is undefined

问题原因 #

报错核心是两种情况：

• 接收组件是函数组件，但误用了类组件的this.props写法——函数组件没有this，直接用参数props即可。
• 如果是类组件，要么没被React Router上下文包裹，要么没正确继承props。

解决方案 #

1. 接收组件是函数组件 #

直接通过组件参数获取props，再解构location.state：

const ReceivingComponent = (props) => {
  const { data } = props.location.state;
  // 也可以直接解构props
  // const { location: { state: { data } } } = props;

  return <div>{data?.description}</div>;
};

如果用React Router v6+，推荐用useLocation钩子，写法更简洁：

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

const ReceivingComponent = () => {
  const location = useLocation();
  const { data } = location.state;

  return <div>{data?.description}</div>;
};

2. 接收组件是类组件 #

先确保组件在BrowserRouter（或其他Router组件）内部，然后直接用this.props：

class ReceivingComponent extends React.Component {
  render() {
    const { data } = this.props.location.state;
    return <div>{data?.description}</div>;
  }
}

如果是React Router v5及更早版本，还需要给组件套withRouter高阶组件，确保能拿到路由相关props：

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

class ReceivingComponent extends React.Component {
  render() {
    const { data } = this.props.location.state;
    return <div>{data?.description}</div>;
  }
}

export default withRouter(ReceivingComponent);

额外提醒 #

• 跳转后刷新页面，location.state会丢失（因为存在内存中），如果需要持久化数据，建议用URL参数或本地存储。
• 解构数据时加可选链?.，避免state或data不存在时触发新的报错。

内容的提问来源于stack exchange，提问作者Omar Dak Elbab