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

Question

我创建了一个将从/example-path提供服务的 React 应用程序。 我在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"> ，但那样的话，这个参数是重复的。 我只想在一个地方定义它。

Answer 1

Router对您的package.json 。 它只是查看浏览器的位置。 如果您使用basename ，则可以设置基本BrowserRouter ：

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

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

Answer 2

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

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

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

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

const myPublicUrl = window.PUBLIC_URL;

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

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

Answer 3

如何在反应应用程序中从 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">

Answer 4

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

1. 在项目的根目录中创建.env文件。

2. 将REACT_APP_HOME_PAGE='/example-path/'添加到.env文件

3. 现在您可以通过应用程序中的process.env.REACT_APP_HOME_PAGE访问您的环境变量，如下所示：

    <Router basename={process.env.REACT_APP_HOME_PAGE}>

Answer 5

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

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

或者

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