reactjs - 获取 React 根 url 路径

Question

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

在生产中:example.com/interface/

在本地:localhost/

不同页面的链接不受这种差异的影响，因为 react-router 根据 react 根路径处理 to-location。
实际上，我的图像存储在公共(public)路径中，因此，我可以在基本位置访问它: /<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
这就是为什么我需要获取 react 根 URL 路径。例如，它允许我在 localhost 中获取“/”，在生产中获取“/interface/”

谢谢你的帮忙

Answer 1

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

解决方案是更改图像 src :

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

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