如何在 react 应用程序中从 package.json 访问主页？答案

【问题标题】：How is it possible to access homepage from package.json in a react app?如何在 react 应用程序中从 package.json 访问主页？
【发布时间】：2021-05-28 17:58:05
【问题描述】：

我创建了一个 React 应用程序，它将由 /example-path 提供服务。我在package.json 中这样定义它：

"homepage":"/example-path"

到目前为止它一直有效，但现在我想使用react-router-dom 添加路由，它错误地将/example-path 检测为 URL 的一部分。

这是我的代码：

<Router>
  <Switch>
    <Route path="/product/:id" children={<DisplayProduct />} />
  </Switch>
</Router>

很遗憾，react-router-dom 试图匹配完整的 URL /example-path/product/10。怎么可能避免呢？是否可以通过某种方式访问homepage 变量？

我可以使用<Router basename="/example-path">，但是那样的话，这个参数是重复的。我只想在一个地方定义它。

【问题讨论】：

您无需访问 Package.json 即可读取您的主页路由。您想向 Package.json 添加不属于它的关注点。您可以使用带有此可配置参数的 config.js 并在任何您喜欢的地方读取它。
@JoelBonetR 在 react 项目中，项目根路径确实在 package.json 的主页参数中定义。那不是我的选择
hmm 不，为什么要在 package.json 中添加项目根路径？如果您设置了脚本以简化运行，例如“parcel index.js”或类似，您的 package.json 中只有您的应用程序的入口点
@JoelBonetR 否则，如果我将我的应用程序放到 /example-path/... 应用程序会尝试从 /static/ 而不是 /example-path/static/... 加载资产
所以你以一种不好的方式链接/需要资源，现在你想添加完整路径...... example-path 必须是你的应用程序的根路径，所以当你链接资产时，你必须使用相对路径'./static/asset'。 *注意斜线前的点

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

Router 对您的package.json 一无所知。它只是查看浏览器的位置。如果你使用BrowserRouter，你可以设置一个basename：

import {BrowserRouter as Router} from 'react-router';

<Router basename="/example-path">
    {/* ... */}
</Router>

【讨论】：

@IterAtor package.json 不应该被您的应用程序代码读取，而是由包管理器读取。您也许可以构建一个工具来读取它并使其在您的 javascript 模块中作为内置变量使用，但为什么要付出这么多呢？我不知道有任何可用的工具可以做到这一点。但是您仍然必须将其作为basename 提供给Router。由于basename 可能不会经常更改，这非常浪费时间。

【解决方案2】：

假设您使用的是create-react-app，这实际上非常简单：

将以下内容添加到public/index.html：

<script>
  window.PUBLIC_URL = "%PUBLIC_URL%";
</script>

现在您可以从 JavaScript 引用主页了！只需通过

访问它

const myPublicUrl = window.PUBLIC_URL;

注意：如果package.json 中没有设置homePage 字段，则该变量将为空字符串，因此我们必须对此进行补偿：

<Router basename={window.PUBLIC_URL && window.PUBLIC_URL.length > 0 ? window.PUBLIC_URL : "/"}>
    {/* ... */}
</Router>

【讨论】：

【解决方案3】：

如何在 react 应用中从 package.json 访问主页？

我们可以使用 PUBLIC_URL 环境变量访问 package.json 的 homepage 字段中设置的 URL。

我们有时会使用相对 URL 将应用程序部署在子目录中，例如我们将应用程序部署在 https://myhostname.com/example-path 中。

为此，我们可以为应用构建设置环境变量PUBLIC_URL=/example-path，或者将package.json主页属性设置为"/example-path"。在你的情况下，你已经设置了

"homepage": '/example-path/'

那么PUBLIC_URL 将被设置为/example-path/。现在您可以在您的 react 应用程序中的任何位置访问此环境变量。

<Router basename={process.env.PUBLIC_URL}>
  <Switch>
    <Route path="/product/:id" children={<DisplayProduct />} />
  </Switch>
</Router>

运行npm run build 后，您可以在build/index.html 中检查您使用%PUBLIC_URL% 的所有地方都设置为/example-path/，如下所示；

<script type="text/javascript" src="/example-path/static/js/main.ec7f1972.js">

【讨论】：

【解决方案4】：

由于您使用的是create-react-app 包，因此您可以在package.json 中使用environment variable 而不是"homepage":"/example-path"：

在项目的根目录中创建.env 文件。
将REACT_APP_HOME_PAGE='/example-path/' 添加到.env 文件中
现在您可以通过 process.env.REACT_APP_HOME_PAGE 在您的应用中，如下所示：
```
<Router basename={process.env.REACT_APP_HOME_PAGE}>
```

【讨论】：

【解决方案5】：

我不知道您的路由器文件的位置在哪里，但您可以尝试将其作为 json 导入到由 create-react-app cli 应用程序创建的 src/index.js 文件中，如下所示；

import myPackageJson from '../package.json';

或

import { homepage } from '../package.json';

【讨论】：