React Router Link组件无法获取state值问题求助

这个问题我之前也碰到过，你遇到的TypeError: cannot read property 'poster' of undefined本质上是**this.props.location.state可能为undefined**，但控制台打印能看到值的原因通常是：当你通过Link跳转时，组件会先执行一次渲染（此时state还没完全传递到位，或者如果用户直接访问Component B的URL，state根本不存在），之后才会拿到正确的state值，而控制台的console.log会显示最新的引用值，导致你误以为它一直存在。

核心原因分析 #

• 当用户不是通过Component A的Link跳转，而是直接在地址栏输入Component B的路由地址时，this.props.location.state会是undefined，因为React Router的state只在通过Link/history.push等方式跳转时才会携带。
• 组件初始化渲染阶段，路由状态可能还未完全同步，此时location.state还未被赋值，直接访问.poster就会报错。

解决方案 #

我们需要给location.state添加空值安全检查，同时处理直接访问路由的边界情况，下面是几种可行的修改方式：

方式1：使用可选链操作符（ES2020+）

这是最简洁的方式，直接在访问属性时添加?.，当左侧值为undefined/null时会返回undefined而不报错：

class Topic extends Component{
 render() {
  // 用可选链安全获取poster，不存在时返回undefined
  const poster = this.props.location.state?.poster;
  // 可以再加个默认值，比如当poster不存在时用默认图片
  const backgroundImage = poster ? `url(${poster})` : 'url(/path/to/default-poster.jpg)';

  return (
   <React.Fragment>
    <div style={{backgroundImage}}>
     <h1>{this.props.match.params.topicId}</h1>
    </div>
   </React.Fragment>
  );
 }
}

方式2：短路判断与解构默认值

如果你的项目还不支持可选链，可以用短路判断配合解构默认值：

class Topic extends Component{
 render() {
  // 先判断state是否存在，不存在则用空对象兜底
  const { poster } = this.props.location.state || {};
  const backgroundImage = poster ? `url(${poster})` : 'url(/path/to/default-poster.jpg)';

  return (
   <React.Fragment>
    <div style={{backgroundImage}}>
     <h1>{this.props.match.params.topicId}</h1>
    </div>
   </React.Fragment>
  );
 }
}

方式3：处理直接访问路由的情况

如果想强制用户从Component A跳转过来，可以在Component B中添加重定向逻辑：

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

class Topic extends Component{
 render() {
  const locationState = this.props.location.state;
  // 如果state不存在，重定向到Topics页面
  if (!locationState) {
    return <Redirect to="/topics" />;
  }

  const { poster } = locationState;
  return (
   <React.Fragment>
    <div style={{backgroundImage: `url(${poster})`}}>
     <h1>{this.props.match.params.topicId}</h1>
    </div>
   </React.Fragment>
  );
 }
}

额外小提示 #

你的Topics组件中，Link的key属性用了topics.id，这里应该是topic.id（因为map的每一项是topic），虽然不影响当前问题，但可能会导致列表渲染的key重复问题，建议修改：

<Link key={topic.id} to={{ pathname: `/${topic.text}`, state: { poster: topic.poster } }}>

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