React JS使用React Router时组件获取props为undefined问题咨询

props为undefined的原因 #

核心问题出在组件导出和路由传参两个环节：

• 组件导出不匹配：SomeClass.js文件中你定义的组件类名为SomeClass，但末尾导出语句写的是export default Nav;，如果App.js中导入的是import SomeClass from './SomeClass'，实际导入的是不存在的Nav对象，渲染的不是你编写的带props接收逻辑的组件，自然无法获取传入的token和auth参数。
• 路由传参写法不规范：React Router v5及更早版本中，Route的component属性仅接收组件构造函数，你使用匿名函数返回组件的写法会导致每次路由刷新时组件被销毁重建，虽然不会直接导致props undefined，但会引发状态丢失、性能下降等问题，建议替换为render属性实现自定义props传递：

// 修正后的App.js路由写法
<Route path="/someendpoint/abc" exact render={() => <SomeClass auth={this.state.auth} token={this.state.token} />} />

document.cookie为undefined的原因 #

document.cookie返回undefined仅在特殊浏览器限制场景下出现，常见原因如下：

• 页面使用file://本地协议直接打开，未通过http/https协议启动服务访问，浏览器默认禁止该协议下的Cookie访问
• 浏览器开启了严格的隐私拦截模式，或者禁用了当前站点的Cookie权限
• 代码运行在无document上下文的环境（如Web Worker、服务端渲染阶段），无法访问document对象

注意：如果Cookie设置了HttpOnly属性，前端JS读取到的会是空字符串，而非undefined，可优先排查上述场景。

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