Quarkus部署React前端时router.errorHandler未触发及手动输入路由404问题求助

Let's break down why you're hitting this issue first: when you click a React Link component, React Router handles navigation entirely on the client side—it never sends a new request to Quarkus. But when you manually type a path like /contact into the browser, the browser sends a direct GET request to Quarkus. Since there's no static file or backend route matching /contact, Quarkus returns a 404.

Your current error handler approach isn't triggering because Quarkus serves static resources before checking custom error handlers for 404s. Here are two reliable fixes to solve this:

Option 1: Use Quarkus HTTP Rewrite (Simplest, No Code Needed) #

This is the easiest approach—configure Quarkus to rewrite all non-API/non-static requests to index.html, letting React Router take over client-side routing.

1. First, confirm your React build output is correctly placed in Quarkus' static resources directory:

   • Copy your React build folder contents into src/main/resources/META-INF/resources/ (Quarkus' default static resource location).

2. Add these rules to your application.properties file:

   # Rewrite all requests that aren't API, static assets, or system files to index.html
   quarkus.http.rewrite.1.source=^(?!/api|/static|/assets|/favicon.ico).*$
   quarkus.http.rewrite.1.target=/index.html
   quarkus.http.rewrite.1.type=REWRITE
   

   Adjust the source regex to match your actual API paths (e.g., if your API uses /v1 instead of /api, update that) and any static asset directories your React app uses (like /js or /css).

Option 2: Custom Route Forwarder (Programmatic Approach) #

If you prefer a code-based solution, create a route that matches all non-API/non-static GET requests and forwards them to index.html:

@ApplicationScoped
public class ReactRouteForwarder {

    private static final Logger LOG = Logger.getLogger(ReactRouteForwarder.class);

    // Match all GET requests that aren't API, static assets, or system files
    @Route(methods = HttpMethod.GET, regex = "^(?!/api|/static|/assets|/favicon.ico).*$")
    public void forwardToIndex(RoutingContext rc) {
        LOG.info("Forwarding client route request: " + rc.request().path());
        rc.reroute("/index.html");
    }
}

This works by intercepting requests that don't match any static files or backend API routes, ensuring React's index.html is served, and letting React Router render the correct component for the requested path.

Quick Verification Checks #

• Ensure you're using BrowserRouter in your React app (which you are, since your paths don't include #). HashRouter avoids this issue entirely but uses less clean URLs.
• Double-check that your React build's index.html exists in Quarkus' static resources directory—this is the file we're forwarding all client routes to.
• After applying the fix, test by manually typing /contact into the browser: Quarkus should serve index.html, which loads React Router and renders the correct component.

Why Your Original Error Handler Didn't Work #

Quarkus prioritizes serving static resources from META-INF/resources over invoking custom error handlers for 404s. When you request /contact, Quarkus looks for a file at META-INF/resources/contact (which doesn't exist) and returns a 404, but your error handler never runs because Quarkus' default static resource handling bypasses custom error logic for these cases. The rewrite rule or custom route approach gets around this by intercepting the request before Quarkus returns a 404.

内容的提问来源于stack exchange，提问作者Wollfie