React嵌套路由直接访问时.env变量读取失败问题求助

问题现象 #

直接访问嵌套路由（如localhost:8080/titles/add）时，控制台触发两个关键错误：

1. 语法错误：
   Uncaught SyntaxError: Unexpected token '<' (at env.js:1:1)
2. 变量读取错误：

bundle.js:59 Uncaught TypeError: Cannot read properties of undefined (reading 'FCF_FEEDER_URL')
    at ./src/App.tsx (bundle.js:59:66)
    at options.factory (bundle.js:82050:31)
    at __webpack_require__ (bundle.js:81473:33)
    at fn (bundle.js:81707:21)
    at ./src/index.tsx (bundle.js:1171:62)
    at options.factory (bundle.js:82050:31)
    at __webpack_require__ (bundle.js:81473:33)
    at bundle.js:82696:37
    at bundle.js:82698:12

• 从根路由localhost:8080/导航至嵌套路由时，变量读取正常
• 将相同组件放在顶级路由（如localhost:8080/add）时，也能正常读取.env变量

路由配置 #

<Routes>
  <Route path="/" element={<WelcomePage />} />
  <Route path="contactus" element={<ContactUsPage />} />
  <Route path='categories' element={<Outlet />} >
    <Route index element={<ProtectedRoute component={CategoriesMainPage} />} />
    <Route path="add" element={<ProtectedRoute component={CategoriesModifyAddPage} />} />
    <Route path=":id" element={<ProtectedRoute component={CategoriesModifyAddPage} />} />
  </Route>
  <Route path='titles' element={<Outlet />} >
    <Route index element={<ProtectedRoute component={TitlesMainPage} />} />
    <Route path="add" element={<ProtectedRoute component={TitlesModifyAddPage} />} />{/* <--- 此处失败 */}
    <Route path=":id" element={<ProtectedRoute component={TitlesModifyAddPage} />} />
  </Route>
  <Route path="add" element={<ProtectedRoute component={TitlesModifyAddPage} />} /> {/* <--- 此处正常 */}
  <Route path="*" element={
    <div>
      <h2>This page or URL seems wrong (404)</h2>
      <p>If its not a type, please contact support</p>
    </div>
  } />
</Routes>

package.json相关配置 #

{
  "scripts": {
    "start": "react-dotenv && PORT=8082 react-scripts start",
    "build": "react-dotenv && PORT=8082 react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "react-dotenv": {
    "whitelist": [
      "FCF_FEEDER_URL",
      "FCF_FEEDER_NAME",
      "AUTH0_DOMAIN",
      "AUTH0_CLIENTID",
      "AUTH0_REDIECTURI"
    ]
  }
}

排查与解决方案 #

核心原因 #

第一个错误Unexpected token '<'说明浏览器请求env.js时，返回的是HTML（通常是404页面）而非JS文件。直接访问嵌套路由时，浏览器会从当前路由路径（如/titles/add/）去查找env.js，而非项目根目录，导致请求路径错误。

解决步骤 #

1. 修正env.js的引入路径
   在index.html中确保用绝对路径引入env.js：

   <script src="/env.js"></script>
   

   避免使用相对路径（如src="env.js"），否则嵌套路由下会从当前子路径发起请求，返回404页面的HTML。

2. 验证react-dotenv输出
   运行npm start后，检查项目根目录下的env.js文件，确认内容是正确的环境变量配置，而非空或错误内容。

3. 配置SPA路由 fallback
   React单页应用需要服务器将所有路由请求指向index.html，否则直接访问嵌套路由会返回404。若使用自定义服务器（如Express），添加如下配置：

   const express = require('express');
   const path = require('path');
   const app = express();
   
   app.use(express.static(path.join(__dirname, 'build')));
   
   app.get('/*', function (req, res) {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
   
   app.listen(8082);
   

   若使用react-scripts start的默认服务器，该配置已内置。

4. 改用Create React App原生环境变量方案
   放弃react-dotenv，使用CRA原生支持：

   • 将.env变量前缀改为REACT_APP_，例如REACT_APP_FCF_FEEDER_URL
   • 代码中通过process.env.REACT_APP_FCF_FEEDER_URL访问变量
   • 无需额外脚本，直接运行react-scripts start即可，彻底规避路径问题

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