获取 React 根 url 路径

Question

我正在使用 create-react-app 和 react-router 创建一个反应应用程序。我想获取我的 React 应用程序的根 URL 路径，因为它可以在不同的位置提供：

• 在生产中：example.com/interface/
• 在本地：本地主机/

不同页面的链接不受这种差异的影响，因为 react-router 根据 react 根路径处理 to-location。实际上，我的图像存储在公共路径中，因此，我可以在基本位置访问它：/<page>

<img src={images/example.png}>

但是如果我在子页面中或者只是 URL 以“/”结尾，例如 /<page>/

<img src={images/example.png}>

将无法工作，因为浏览器搜索图像/<page>/images/example.png而不是/images/example.png。此外，如果我将图像 src 设置为/images/example.png它仅适用于本地主机而不适用于生产，因为在生产中，浏览器会搜索图像example.com/images/example.png而不是example.com/interface/images/example.png

这就是为什么我需要获取 react 根 URL 路径的原因。例如，它允许我在本地主机中获取“/”和在生产中获取“/interface/”

感谢您的帮助

Answer 1

我找到了解决方案：Webpack 在 env 变量中获取 react root URL PUBLIC_URL

解决方案是更改图像 src ：

<img src=`${process.env.PUBLIC_URL}/images/example.png`

它适用于生产、开发和所有其他环境。感谢您的帮助

Answer 2

这可以通过在 中设置homepage属性来完成package.json。
构建项目时，您会看到一条解释它的消息：

该项目是假设它托管在服务器根目录下构建的。要覆盖它，请在 package.json 中指定主页。例如，添加以下内容为 GitHub Pages 构建它：

"homepage": "http://myname.github.io/myapp"

请参阅文档：部署：构建相对路径

如果你这样做，当它在你的本地开发环境中工作时，它也应该在生产中工作。

在您的情况下，设置"homepage": "https://example.com/interface/"使其在生产中工作。您不需要额外的代码。

请记住，您可能必须正确导入图像路径，以便由 webpack 处理逻辑。您的组件中不应有真正的 Web 路径，只需从开发环境中的路径中导入内容即可。

import example from 'images/example.png';
[...]
<img src={example} />

请参阅添加图像、字体和样式以及使用公用文件夹：何时使用公用文件夹