I have different react apps and its backend-service deployed independently inside the Openshift. There is one app among them where users login and navigate to othes apps using links provided in this app.

Presently, the link of each app points directly to the "Openshift Route" (similar to Kube Ingress) of the react app.

But, this for production regions we have to change the way it works. There is one public domain exposed, say, apps.mydomain.com. We should make the links of each on the apps in such a way that it is loaded by this path, apps.mydomain.com/reactapp1 should load reactapp1 & reactapp2 should be loaded in apps.mydomain.com/reactapp2 and so on.

So there is one Ingress configured configured with paths

rules:
- host: apps.mydomain.com
  http:
    paths:
      - backend:
          serviceName: home
          servicePort: 8080
        path: /
      - backend:
          serviceName: react-app-1
          servicePort: 8080
        path: /reactapp1
      - backend:
          serviceName: app-1-api
          servicePort: 8080
        path: /app1/api
      - backend:
          serviceName: react-app-2
          servicePort: 8080
        path: /reactapp2
      - backend:
          serviceName: app-2-api
          servicePort: 8080
        path: /app2/api

When I hit the url https://apps.mydomain.com it loads the home app, after login, on clicking the app links the apps doesn't load. Though I could see the browser title changed to the navigated app, I get this error Uncaught SyntaxError: Unexpected token <.

After lots of searches I find the react app should have to be configured differently if it needs to be deployed not from root.

What am I missing? Where am I doing wrong? Ingress or react app build? Can I have different Ingress with same domain but with different paths for each react-app & its backend api?