reactjs在开发中设置了base-href

2024-05-21 • 问答

我有一个使用'npm init react-app myapp'创建的React应用程序。我正在通过执行npm start运行该应用程序。我需要在/ myapp之类的特定路径下运行该应用程序，类似于在执行'ng serve --base-href / myapp /时对角度应用程序所做的操作。

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

我该怎么做？

谢谢

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

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

您的情况将是

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

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

例如。

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

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

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

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

<base href="/app">

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