React应用内无法访问环境变量问题求助

核心规则：React环境变量必须以REACT_APP_为前缀 #

Create React App（CRA）默认只会暴露以REACT_APP_开头的环境变量到客户端代码，这是你无法访问MONGO_URI的主要原因。

步骤1：修改.env文件的变量命名 #

将你的.env文件中的变量名加上REACT_APP_前缀：

REACT_APP_MONGO_URI=你的MongoDB连接字符串

步骤2：重启React开发服务器 #

.env文件的修改不会实时生效，必须重启你的React开发服务（比如停止npm start后重新启动），新的环境变量才会被加载。

步骤3：在函数组件中访问变量 #

直接通过process.env.REACT_APP_XXX访问，修改你的代码：

// 原代码
<h1>Hello {process.env.MONGO_URI}</h1>

// 修改后
<h1>Hello {process.env.REACT_APP_MONGO_URI}</h1>

步骤4：在类组件中访问变量 #

类组件中同样可以直接使用process.env.REACT_APP_XXX，示例：

import React from 'react';

class ExampleClassComponent extends React.Component {
  render() {
    return (
      <div>
        <p>MongoDB地址：{process.env.REACT_APP_MONGO_URI}</p>
      </div>
    );
  }
}

export default ExampleClassComponent;

重要提醒 #

不要在React客户端代码中存储敏感信息（比如数据库连接字符串、API密钥等）。客户端代码最终会被打包并暴露给所有用户，敏感信息应该只放在后端（Node.js/Express）的.env文件中，前端只存储非敏感的配置（比如API基础地址REACT_APP_API_URL）。

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