React-router urls don't match using Apache reverse proxy

My team had a similar issue, and the way they've resolved it was by using a RewriteRule with a forced redirect [R] before letting Apache Proxy pass catch it off. So perhaps you could try it out:

<VirtualHost *:80> ProxyRequests off RewriteRule ^/foo/bar/& /bar/ [R] ProxyPass "/bar/" "http://localhost:8777/" ProxyPassReverse "/bar/" "http://localhost:8777/"</VirtualHost>

I am not an expert on Apache configurations, so you might have to play around with the RewriteRule a bit yourself (https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html#rewriterule). However, I believe the above could potentially be an answer to only a part of your question:

how do you setup the proxypass so that a request to example.com/foo/bar is transformed to a request to localhost:8777/bar on the server

But I am not too sure about this, sorry:

then returned to the client as if it came from example.com/foo/bar?

Hope some of it could help.

change nginx server more flexible and easy config

server {   listen 80 default_server;  listen [::]:80 default_server;  root /usr/share/nginx/html/web;  location / {  try_files $uri /index.html;}}