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

Question

我创建了一个 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"> , 但这样一来，这个参数就是重复的。我只想在一个地方定义它。

Answer 1

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

We can access the URL set in package.json's homepage field using PUBLIC_URL environment variable.

我们有时使用相对 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">