如何在create-react-app中通过.env配置Mapbox AccessToken并解决报错？

没问题，我来帮你搞定这个Mapbox Token的配置问题，用create-react-app的.env文件来管理是最规范的方式，步骤很清晰：

• 第一步：创建.env文件
  在你的create-react-app项目根目录（和package.json同级的文件夹）下新建一个名为.env的文件，注意文件名前面的点不能少，也不要加任何后缀。

• 第二步：写入Token内容
  在这个.env文件里，严格按照下面的格式写入你的Mapbox Access Token：

  REACT_APP_MAPBOX_ACCESS_TOKEN=你的实际Mapbox Token字符串
  

  👉 必须注意的细节：

  • 变量名一定要以REACT_APP_开头，这是create-react-app的硬性规定，只有带这个前缀的环境变量才会被自动注入到项目中
  • 不要给Token加单/双引号，也不要在等号前后加空格，否则会导致Token识别失败

• 第三步：在组件中调用Token
  修改你的App组件，把环境变量里的Token传给ReactMapGL组件的mapboxApiAccessToken属性即可：

  import {Component} from 'react';
  import ReactMapGL from 'react-map-gl';
  
  class App extends Component {
    state = {
      viewport: {
        width: 400,
        height: 400,
        latitude: 37.7577,
        longitude: -122.4376,
        zoom: 8
      }
    };
  
    render() {
      return (
        <ReactMapGL
          {...this.state.viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          onViewportChange={(viewport) => this.setState({viewport})}
        />
      );
    }
  }
  

• 第四步：重启开发服务器
  create-react-app只会在启动时读取.env文件的内容，所以修改完.env文件后，一定要关掉当前的开发服务器，重新运行npm start，新的环境变量才会生效。

另外提一句你之前props传Token没生效的原因：你在index.js里把token传给了App组件，但你的App组件并没有把这个props传递给内部的ReactMapGL组件，所以ReactMapGL还是拿不到Token，自然会报错。用.env的方式就不需要手动传props了，更省心。

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