React app will give 404 on refreshing page in prod, but not in dev

Question

I have a React app, and I have an issue with 404 in my navigation, if I try to refresh a page that is not the root page, it will give me a 404.

Thing is it only happens to me on production and not on dev.

In dev environment, I use npm start, on prod environment, I use serve build.

This make debug more complicated, as I lose the hot-reload option for debugging. I must compile my docker image each time I make a change.

Here is a bit of my code:

<BrowserRouter>
        <div>

            <Switch>
                <Route exact path="/premiere-connexion" component={FirstLoginLayout}/>
                {(user.state === "1" && window.location.pathname === "/premiere-connexion") &&
                <Redirect to="/premiere-connexion"/>}
                <PrivateRoute path="/bo" component={BackOfficeLayout} profiles={["ADMIN"]}/>
                <Route exact path="/" component={Customer}/>
                <Redirect to="/"/>
            </Switch>
            }
        </div>
    </BrowserRouter>

Any Idea how should I reproduce it in local ?

Answer 1

With @hbentlov recommendations, I solved this issue creating a file serve.json in the public/ folder, with this content:

{
  "rewrites": [{
    "source": "**",
    "destination": "/index.html"
  }]
}