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

标签 reactjs tomcat

我开发了一个 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)

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

最佳答案

由于您将 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>

关于reactjs - 在 apache tomcat 中部署 React 构建应用程序时如何修复路径错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54722741/

相关文章:

javascript - 只需要 Promise 同步性返回,而不是使用 '.then' 时的值

java - Wicket 应用程序可以在没有管理员密码的情况下触发自身重启吗?

tomcat - t 找到基本名称 org.eclipse.persistence.exceptions.i18n.PersistenceUnitLoadingExceptionResource 的包,语言环境 en_US

reactjs - 无法在类组件中使用 usehistory,withrouter 的示例

javascript - 不能使用 replaceAll 或替换为 nextjs/reactjs

javascript - prop 更改时重新渲染功能组件

java - 已为此响应调用 Tomcat 8.5 response.getWriter()

c++ - 查找tomcat安装目录

java - Tomcat WebSocket 连接已关闭,代码 : 1006 issue

javascript - 使用 Flux 时保持 UI 与 ajax 调用同步的惯用方法是什么?