ReactJS页面间传递Props后无法显示的问题咨询

嘿，我发现你在获取传递的数据时找错地方啦！你通过history.push第二个参数传递的是路由state，这些数据并不在history对象本身，而是存在location对象的state属性里。

类组件中正确获取数据的方式 #

你可以这样修改接收页面的代码：

// 类组件中获取state里的id
{this.props.location.state?.id}

这里用可选链操作符?.是为了避免当state不存在时（比如直接访问About页面而不是通过跳转过来）出现报错。如果你的环境不支持可选链，也可以用条件判断做兼容：

{this.props.location.state && this.props.location.state.id}

补充：函数组件的获取方式（如果后续用到） #

如果之后你切换到函数组件开发，也可以通过useLocation钩子来获取数据：

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

function About() {
  const location = useLocation();
  return <div>{location.state?.id}</div>;
}

额外注意点 #

需要提醒你的是，这种通过state传递的数据，在页面刷新后会丢失（因为它存在内存中）。如果需要持久化保留的数据，你可以考虑把参数放在URL的查询参数里，示例如下：

// 传递时改为查询参数形式
this.props.history.push('/About?id=2')

// 类组件中接收查询参数
new URLSearchParams(this.props.location.search).get('id')

// 函数组件中接收查询参数
new URLSearchParams(useLocation().search).get('id')

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