'React Router Removes server prefix (Reverse Proxy)

I am trying to run a React Application behind a reverse proxy server that has a prefix(say root-prefix) and secondary prefix(say subdirectory/path).

The final URL is of form https://myserver.com/root-prefix/subdirectory/path

I have added basename for subdirectory:

 <BrowserRouter basename="/subdirectory/path">
                <Header />
                    <Switch>
                        <Route
                            path="/componentA"
                            component={componentA}
                        />
                        <Route
                            path="/componentB"
                            component={componentB}
                        />
                    </Switch>
                <Footer />
 </BrowserRouter>

Server URL: https://myserver.com/root-prefix/subdirectory/path: This renders a path with Header and Footer without Main content.

When I hit specific a component it renders but is the of form https://myserver.com/subdirectory/path/componentA (Note root-prefix is removed.)

My nginx.conf

http {

server {

location ^~ /subdirectory/path {
      # proxy_pass ${upstream}; # Getting 502: Bad Gateway
      absolute_redirect off;
      add_header Access-Control-Expose-Headers "Origin";
      add_header Access-Control-Allow-Methods "GET,POST,PUT,DELETE";
      try_files $uri $uri/ /index.html;
    }
}

}

Is React Router removing root-prefix internally. If so, what is the approach for allowing root-prefix for all components.

Note: Prefixing root-prefix in location of Nginx gives 404 for the entire application.

Solution 1:^[1]

you need to include the root-prefix in the basename:

<BrowserRouter basename="/root-prefix/subdirectory/path">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Taxel

'React Router Removes server prefix (Reverse Proxy)

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]