获取响应根url路径
我正在创建一个具有创建-反应-应用和反应-路由器的反应应用程序。我想获得我的react应用程序的根URL路径，因为它可以在不同的位置服务：
- 在生产中: example.com/interface/
- 当地:本地主机/
指向不同页面的链接不受此差异的影响，因为react路由器根据are根路径处理位置。实际上，我的图像存储在公共路径中，因此，我可以在基本位置访问它：/<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上搜索图像。
这就是为什么我需要获得路径。例如，它允许我在本地主机中获取"/“，在生产中获取"/interface/”。
谢谢你的帮助
回答 3
Stack Overflow用户
发布于 2019-03-04 17:22:51
我找到了解决方案: Webpack在env变量PUBLIC_URL中获得了react根URL
解决方案是更改映像src：
<img src=`${process.env.PUBLIC_URL}/images/example.png`它在生产、发展和所有其他方面都起作用。谢谢你的帮助
Stack Overflow用户
发布于 2019-03-04 15:12:26
这可以在homepage中设置package.json属性。
在构建项目时，您会看到一条解释该项目的消息：
该项目是在假定它托管在服务器根目录下构建的。若要重写此操作，请在package.json中指定主页。例如，将其添加到为GitHub页面构建它：
"homepage": "http://myname.github.io/myapp"
请参阅文档：部署:构建相对路径
如果这样做，当它在本地dev环境上工作时，它也应该在生产上工作。
在您的例子中，设置"homepage": "https://example.com/interface/"使其在生产中工作。你不需要额外的代码。
请记住，您可能必须正确导入图像路径，以便由webpack处理该逻辑。您不应该在组件中有真正的web路径，只需从开发环境中的路径中导入一些东西，并进行神奇的工作。
import example from 'images/example.png';
[...]
<img src={example} />Stack Overflow用户
发布于 2019-03-04 15:20:00
如果我正确理解了您的问题，您希望能够根据您的开发环境和生产环境设置不同的根路径。
幸运的是，create允许您使用.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
我希望这能帮到你。
https://stackoverflow.com/questions/54985914
复制相似问题
腾讯云开发者
