unable to set react routing with vertx - reactjs

Question

public class BackendVerticle extends AbstractVerticle {
#Override
public void start() throws Exception {
// tag::backend[]
Router router = Router.router(vertx);
router.get().handler(StaticHandler.create()); // <3>
vertx.createHttpServer()
.requestHandler(router)
.listen(8080);
// end::backend[]
}
// tag::main[]
public static void main(String[] args) {
Vertx vertx = Vertx.vertx(); // <1>
vertx.deployVerticle(new BackendVerticle()); // <2>
}
// end::main[]
}
I have created react application with vertex following https://how-to.vertx.io/single-page-react-vertx-howto/. I have set react routing using react-router which works fine when i use the internal react node server which runs on localhost:3000 by default.But when i trid to serve static pages via vertx static handler except for default / route other routes return "Not Found"
enter image description here

Answer 1

When the static website is built, it consists in a single index HTML file.
The React Router allows to create paths for specific views. These paths can be interpreted by the React Router but they do not map to actual files on the backend server.
This is why you get a 404 NOT FOUND response if you try to load anything else than /.
To fix the issue, configure the Vert.x Web Router to reroute anything the StaticHandler could not load to /:
// After you've setup the other routes
router.get().handler(StaticHandler.create());
router.get().handler(rc -> rerouteToIndex(rc));
private void rerouteToIndex(RoutingContext rc) {
if (!"/".equals(rc.normalisedPath())) {
rc.reroute("/");
} else {
rc.next();
}
}