React PrivateRoute组件报location为必填但值为undefined告警如何处理

• PropType校验的是直接传入PrivateRoute组件的入参，而非Route组件render回调中注入的props。你代码里打印的props.location是Route组件在执行render方法时传入的参数，本来就会由react-router-dom自动注入，所以始终有值。
• 你错误地将location属性加到了PrivateRoute自身的propTypes规则中，且标记为必填，但你在调用<PrivateRoute exact path="/dashboard" component={Dashboard} />时，并没有给PrivateRoute传入location属性，因此触发了PropType必填校验告警，这就是打印有值但告警仍出现的核心矛盾点。
• 你添加默认location后页面空白的原因：设置的defaultProps会被合并到PrivateRoute的入参中，随...rest传递给内层的Route组件。Route组件如果接收到外部传入的location属性，会优先用你传入的这个空pathname的location做路由匹配，自然匹配不到你定义的/dashboard等路由规则，导致页面空白。

直接删除PrivateRoute.propTypes中所有和location相关的校验规则即可，修改后的propTypes配置如下：

PrivateRoute.propTypes = {
  component: PropTypes.any.isRequired, // eslint-disable-line
};

location根本不是PrivateRoute的入参，不需要对它做校验，你在render回调中使用的location由react-router-dom保证存在，不需要额外处理。

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