时间戳

首页 > 解决方案 > React 应用程序在使用非主页 url 访问它时未加载 js 文件

javascript - React 应用程序在使用非主页 url 访问它时未加载 js 文件

问题描述

我有一个与nodejs backend一起服务的react 应用程序。我的要求是从节点服务器注入一个变量以在代码运行时对其做出反应。当我使用主页 URL 访问应用程序时，它可以正常工作，但不能使用其他 URL。我将提供更多细节以了解完整的场景。

在节点服务器中，我有代码来创建这样的文件：dist文件夹是存储反应构建的地方

    fs.writeFileSync(
      path.join(__dirname, "../dist", "config.js"),
      `window.INJECTED_VARIABLE= { value: "qwerty", }`
    );

在 public > index.html 我有这个脚本来加载创建的 config.js 文件。

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

现在，当我运行我的节点服务器并使用主 URL http://localhost:3000访问我的应用程序时，我可以访问注入的值 - window.INJECTED_VARIABLE as { value: "qwerty", } 并且配置文件也是出现在 chrome devtools的“源”选项卡下。

我的应用程序中有一个页面 - http://localhost:3000/profile/profileId，当我使用此 URL 直接打开我的应用程序时，我看到 window.INJECTED_VARIABLE 未定义。如果我们查看 chrome devtools，看起来源选项卡中没有配置文件。

我在生产中也遇到了同样的问题。

谁能解释这种行为并帮助我修复它。我将不胜感激任何帮助。

标签： javascriptnode.jsreactjstypescriptjsx

解决方案

中的点./config.js表示相对于当前路径的 URL。ie提供的文件/profile/profileId将请求该文件/profile/profileId/config.js-该文件不存在。

要指定部分 URL 始终来自根，您应该省略点。

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

推荐阅读