获取 React 根 url 路径

Question

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

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

不同页面的链接不受这种差异的影响，因为 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 它仅适用于 localhost 但不适用于生产，因为在生产中，浏览器会在 example.com/images/example.png 而不是 example.com/interface/images/example.png 搜索图像

这就是为什么我需要获取反应根 URL 路径。例如，它允许我在 localhost 中获取“/”，在生产中获取“/interface/”

感谢您的帮助

Answer 1

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

解决办法是改变图片src：

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

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

Answer 2

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

该项目是在假设它托管在服务器根目录的情况下构建的。到 覆盖它，在你的 package.json 中指定主页。例如， 添加这个为 GitHub Pages 构建它：

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

查看文档：Deployment: Building for relative paths

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

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

请记住，您可能必须正确导入图像路径，以便由 webpack 处理逻辑。 您的组件中不应该有真正的 Web 路径，只需从您在开发环境中的路径中导入内容，然后魔法就会起作用。

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

见Adding Images, Fonts and Styles和Using the public folder: When to use the public folder

Answer 3

如果我正确理解您的问题，您希望能够根据您的开发环境和生产环境设置不同的根路径。

幸运的是，create-react-app 允许您使用 .env 文件创建环境变量。

您需要在本地和生产环境中使用这些文件之一。请注意，您不得将这些文件添加到版本控制中，因为它们通常包含密钥，即使它们不包含密钥也是一种好的做法。

创建.env 文件后，您需要为所有环境变量添加前缀REACT_APP<environment variable>，因此在本例中为REACT_APP_ROOT_PATH。 然后，您需要按如下方式进行设置；

REACT_APP_ROOT_PATH=localhost/ 用于您的本地环境，并且

REACT_APP_ROOT_PATH=example.com/interface/ 用于您的本地环境。

有关此功能的更高级用法，这里有一些文档：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env

我希望这会有所帮助。