如何解决Quarkus部署React应用后useEffect钩子不执行问题？

安全阿岳

2026-7-28

解决方案

1. 修复useEffect的异步写法问题

你的useEffect回调直接返回async函数的写法不符合React规范——React要求effect的回调要么返回清理函数，要么返回undefined，返回Promise会导致逻辑异常，甚至阻止effect执行。正确写法如下：

useEffect(() => {
  const fetchData = async () => {
    const items = await getAllItems();
    setItems(items);
  };
  fetchData();
}, []);

或者用立即执行的异步函数：

useEffect(() => {
  (async () => {
    const items = await getAllItems();
    setItems(items);
  })();
}, []);

2. 修正React打包的资源路径配置

Quarkus托管静态资源时，React默认的绝对路径配置会导致资源加载失败，进而中断前端逻辑执行。在项目根目录的package.json中添加homepage配置：

{
  "homepage": "."
}

该配置会让React使用相对路径生成资源链接，确保在Quarkus的静态资源目录下能正确加载所有JS、CSS文件。

3. 确保Quarkus处理SPA路由Fallback

React是客户端路由，当刷新非根路径（如/policies）时，Quarkus会默认寻找对应后端端点，返回404的同时会中断前端JS执行。需要确保你的REST端点能将所有前端路由请求转发到index.html，示例实现：

@GET
@Path("{path:.*}")
public Response serveFrontend(@PathParam("path") String path) {
  final File resourceFile = new File("target/classes/META-INF/resources/" + path);
  if (resourceFile.exists() && !resourceFile.isDirectory()) {
    return Response.ok(resourceFile).build();
  } else {
    return Response.ok(new File("target/classes/META-INF/resources/index.html")).build();
  }
}

同时要确认Maven插件配置正确执行了npm run build，并将React构建产物复制到Quarkus的META-INF/resources目录下。