I have a problem that is: I can't serve a react app in a sub-directory using HashRouter. I already tried the solutions proposed in this and this questions but it doesn't work as expected.

I have the following architecture:

• Traefik as reverse-proxy

  foo-service:
    image: foo
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.foo.rule=Host(`foo.localhost`) && PathPrefix(`/bar`)"
      # The line below is done in order to nginx to serve the files on the root 
      - "traefik.http.middlewares.pathStrip.stripprefix.prefixes=/bar"
      - "traefik.http.routers.foo.middlewares=pathStrip@docker"

• nginx serving a React App (that uses HashRouter)

  The problem here is that on package.json when I use "homepage": "." and I enter foo.localhost/bar I get a lot of 404 errors because the links to resources such as js/css are located on ./static/css/...css instead of bar/static/css/...css.

  When I put "homepage": "/bar" the resources are loaded correctly but the URL becomes foo.localhost/bar#/login which seems wrong.

  And finally when I set both "homepage": "/bar" and <HashRouter basename={'/bar'}> the resources are also loaded correctly but then the URL becomes foo.localhost/bar#/bar/login which is a disaster.

I know that my second solution is "apparently" the closest one to the right solution but I honestly dislike it because setting the path on package.json seems bad to me. I would like to only change the reverse-proxy configuration instead and let the app be "agnostic".

Thanks in advance.