reactjs在开发中设置base-href答案

【问题标题】：reactjs set base-href in developmentreactjs在开发中设置base-href
【发布时间】：2019-11-05 04:34:13
【问题描述】：

我有一个使用“npm init react-app myapp”创建的反应应用程序。我通过执行 npm start 来运行应用程序。我需要在 /myapp 之类的特定路径下运行应用程序，类似于我们在执行 'ng serve --base-href /myapp/ 时对 Angular 应用程序所做的事情。

我正在'localhost:3000' 上运行应用程序，我需要在'localhost:3000/app' 上运行它

我该怎么做？

谢谢

【问题讨论】：

标签： reactjs

【解决方案1】：

您的应用应该适用于任何路径，因此这更多是部署配置问题。您可以在/ 上本地运行，然后在/app 上部署以进行生产，只需正确配置代码即可。

如果路径不是/，您需要在index.html 的标题中定义您的base href 元素。确保在使用任何 url 之前。

<base href="/app">

进行完整配置的最佳方式是将该值保存在环境变量中，例如 this 或 this。

【讨论】：

【解决方案2】：

我假设您在 React 中使用 BrowserRouter 进行路由。

只需添加一个属性“basename”，它将接受您要使用的基本 URL 的字符串。

在你的情况下，它将是

<BrowserRouter basename="/app">
    ...
</BrowserRouter>

【讨论】：

【解决方案3】：

任何反应路由器都应该使用基本名称前缀字符串。

例如。

import { HashRouter } from 'react-router-dom'; 

<HashRouter basename="/app">
    <App />
</HashRouter>

【讨论】：