Question

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

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

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

可以在homepage中设置package.json属性。
构建项目时，您会看到一条说明消息：

项目是在假定它托管在服务器根目录下构建的。至   覆盖它，在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 2

我找到了解决方案：Webpack在env变量PUBLIC_URL中获取了反应根URL

解决方案是更改图像src：

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

它可以在生产，开发和其他所有环境中工作。谢谢您的帮助

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

我希望这会有所帮助。

获取React根URL路径

3 个答案: