直接访问React路由URL时出现环境变量读取未定义错误

看起来你遇到的问题是通过客户端导航跳转路由时一切正常，但直接在新标签页访问路由URL时，环境变量REACT_APP_ENV读取失败。这个问题大概率和react-dotenv的配置或者环境变量的加载时机有关，下面给你几个排查和解决的方向：

1. 检查react-dotenv的配置是否正确 #

如果你是用react-dotenv来管理环境变量，需要确保在package.json的脚本里正确引入它，让它在React脚本执行前先加载环境变量：

"scripts": {
  "start": "react-dotenv && react-scripts start",
  "build": "react-dotenv && react-scripts build",
  "test": "react-dotenv && react-scripts test"
}

同时要确保项目根目录下存在.env文件，并且变量都是以REACT_APP_开头的（这是Create React App的要求），比如：

REACT_APP_ENV=DEV
REACT_APP_DEV_BH=http://dev-api.example.com
REACT_APP_PROD_BH=http://prod-api.example.com

2. 改用Create React App原生的环境变量读取方式 #

其实Create React App本身就支持环境变量，不需要额外依赖react-dotenv（除非你有特殊需求）。你可以把代码里的env.xxx改成process.env.xxx，比如：

// 替换之前的代码
const BH = process.env.REACT_APP_ENV === "DEV" 
  ? process.env.REACT_APP_DEV_BH 
  : process.env.REACT_APP_PROD_BH;
const WS = process.env.REACT_APP_ENV === "DEV" 
  ? process.env.REACT_APP_DEV_WS 
  : process.env.REACT_APP_PROD_WS;

这样可以避免第三方包的配置问题，Create React App会自动把REACT_APP_前缀的变量注入到process.env中，无论是客户端导航还是直接刷新页面都能正确读取。

3. 验证服务器的路由 fallback 配置（可选） #

虽然你的错误是环境变量导致的，但如果是部署到生产环境，直接访问路由时服务器需要配置fallback到index.html，否则服务器会尝试找对应路由的静态文件，返回404。不过你现在是本地开发（localhost:3000），Create React App的开发服务器已经默认配置了这个，所以本地环境可以暂时忽略，但部署时需要注意。

4. 重启开发服务器 #

修改环境变量后，一定要重启React开发服务器，否则新的环境变量不会生效。有时候我们修改了.env文件但没重启，也会出现变量未定义的问题。

你可以先试试把环境变量的读取改成process.env的方式，重启服务器后再直接访问路由URL，应该就能解决这个问题了。

内容来源于stack exchange