reactjs - 在 apache tomcat 中部署 React 构建应用程序时如何修复路径错误

Question

我开发了一个 React 应用程序并使用“npm run build”创建了一个生产版本。当我将此构建文件放入 apache tomcat 的 webapps 文件夹(名为 ldap)并启动服务器并转到“http://localhost:8080/ldap/”此链接时，它显示所有静态文件的 404 错误。

我查看了网络选项卡，发现我所有的静态文件都是从 http://localhost:8080/static/css/main.4e0cec6e.chunk.css 提供的。它在链接中缺少“ldap”部分(http://localhost:8080/ldap/static/css/main.4e0cec6e.chunk.css)

有没有办法解决这个错误。

Answer 1

由于您将 React 应用安装在子目录中，因此您需要处理一些事情。

首先是在你的路由器中设置 basename 属性，这会告诉你的 React 应用它将被挂载到一个子目录中。

<Router basename={'/your-directory'}>
  <Route path='/' component={SomeComponent} />
</Router>

接下来需要做的是在 package.json 文件中设置主页参数。您设置应用的完整 URL。

“主页”:“https://yourapp.com/your-directory”

您需要做的第三件也是最后一件事情是更新您的链接和路线。

路线示例:

<Route path={`${process.env.PUBLIC_URL}/`} component={HomeComponent} />
<Route path={`${process.env.PUBLIC_URL}/other-dir`} component={SomeOtherComponent} />

链接示例:

<Link to={`${process.env.PUBLIC_URL}/other-dir`}>Link to /other-dir</Link>