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

Question

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

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

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

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

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

现在，当我运行节点服务器并使用主URL访问应用程序时http://localhost:3000，我可以访问注入值窗口。INJECTED_VARIABLE为{value:"qwerty"，}，并且配置文件也存在于">源"；chrome devtools中的选项卡。

我的应用程序中有一个页面-http://localhost:3000/profile/profileId，当我用这个URL直接打开我的应用程序时，我会看到窗口。INJECTED_VARIABLE为未定义。如果我们在chrome devtools中查看，则source选项卡中似乎没有配置文件。

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

有人能解释一下这种行为并帮我解决吗？如果有任何帮助，我将不胜感激。

Answer 1

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

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

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