如何在 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 访问主页？

homepage我们可以使用环境变量访问 package.json 字段中设置的 URL PUBLIC_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 2

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

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

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