reactjs - How to build React app from an apache subfolder?

Question

I have a client with react app. The server is using apache, and he configured the app to be on:

http://my-domain.com/frame

I have build the app and it loads (css+js), but some routing issues still remain. For example, I am using routes, so there are pages like:

http://localhost:3000/frame
http://localhost:3000/page1
http://localhost:3000/page2

It works in my local, and on the server routing works when using the app normally, but when refreshing the page, it "loses" the routing and show error. I mean:

http://my-domain.com/frame
http://my-domain.com/page1
http://my-domain.com/page2

works as long as I am in the app (so frame -> page1 -> page2 works, but going directly to page1 doesn't).

My apache .htacess:

<IfModule mod_rewrite.c>
    RewriteEngine On
        # If an existing asset or directory is requested go to it as it is
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
        RewriteRule ^ - [L]
        # If the requested resource doesn't exist, use index.html
    RewriteRule ^ /index.html
</IfModule>

package.json:

{
...
  "homepage": ".",
...
}

public/manifest.json:

{
...
  "start_url": ".",
...
}

Answer 1

I was using BrowseRouter. I switched to using HashRouter, and it started working.

This is the code:

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import Login from './components/Login';
import Queues from './components/Queues';

const App = () => {
    return (
        <div id="app" className="full-height">
            <Router basename={'/'}>
                    <Switch>
                        <Route path='/queues' component={Queues} exact />
                        <Route path='/'  exact >
                            <div className="full-height">
                                <Login />
                            </div>
                        </Route>
                    </Switch>
            </Router>
        </div>
    );      

After build, I copy the build folder to apache where I need it.

Then the url looks like this:

http://localhost:3000/path/to/folder/#/
http://localhost:3000/path/to/folder/#/page1