React未接收props时自动重定向至仪表盘的实现方案

我来帮你搞定这个问题！首先咱们得搞清楚为啥会报错：当你通过Link组件跳转时，to属性里的state会被React Router带上，但直接在浏览器地址栏输入路由地址时，这个state是不存在的——也就是说this.props.location.state是undefined，你直接去取它的lessonplan_id自然就会抛出Cannot read property 'lessonplan_id' of undefined的错误。

下面给你两种可行的解决方案，你可以根据自己的需求选：

方案一：检查state并自动重定向（类组件版） #

首先，先修改构造函数，避免直接访问undefined的属性，先做个兜底处理：

constructor(props) {
  super(props);
  // 用可选链操作符（?.）判断state是否存在，不存在就设为null
  this.state = { 
    currSlide: 0, 
    slides: [], 
    lessonplan_id: props.location.state?.lessonplan_id || null 
  };
}

然后，在组件挂载完成后（或者在渲染时）检查是否拿到了lessonplan_id，如果没拿到就重定向到仪表盘：

方式1：用componentDidMount生命周期跳转 #

componentDidMount() {
  // 如果lessonplan_id不存在，跳转到仪表盘
  if (!this.state.lessonplan_id) {
    this.props.history.push('/dashboard');
  }
}

⚠️ 注意：如果你的组件不是直接由Route渲染的，可能需要用withRouter高阶组件包裹，才能拿到history props。

方式2：在render里返回Redirect组件 #

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

// ...

render() {
  // 检查location.state里的lessonplan_id是否存在
  const hasLessonId = this.props.location.state?.lessonplan_id;
  if (!hasLessonId) {
    return <Redirect to="/dashboard" />;
  }

  // 正常渲染你的组件内容
  return (
    <div>
      {/* 你的组件代码 */}
    </div>
  );
}

方案二：改用URL参数传递id（更推荐） #

其实用state传递id不是最可靠的方式，因为直接访问路由时state会丢失。更稳妥的做法是把lessonplan_id作为URL的一部分，也就是URL参数：

1. 修改Link的to属性，把id拼到路径里：

<Link to={`/your-target-route/${lessonplan_id}`}>跳转</Link>

2. 在路由配置里定义参数：

<Route path="/your-target-route/:lessonplan_id" component={YourTargetComponent} />

3. 在目标组件里通过match.params获取id：

constructor(props) {
  super(props);
  this.state = { 
    currSlide: 0, 
    slides: [], 
    // 从URL参数里取id，不管是跳转还是直接访问都能拿到
    lessonplan_id: props.match.params.lessonplan_id 
  };
}

这种方式更符合RESTful的路由设计，而且不管用户是点击链接还是直接输入URL，都能正常获取到id，从根源上避免了state不存在的问题。

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