React router app hosted in firebase, child routes returns 404

Question

I have a create react app, hosted in Firebase. I'm using react-router-dom.

Everything work as expected if I request the root route '/'. Then I can request child routes.

But if I'm a new user or go to a private tab and try to hit a child route directly. It returns a 404 not found page :

Here is a sample of my Router :

    <Router>
      <Switch>
        <Route path="/" component={UserDashboard} exact />
        <Route path="/email-link-sign-up" component={EmailLinkSignUp} exact />
        <Route path="/join-with-hash" component={JoinClubHash} exact />
        <Route component={Login} />
      </Switch>
    </Router>

How can I fix this?

Answer 1

Adding this rule in hosting attribute in the firebase.json file did the trick :

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

It basically says "Every child paths should serve index.html file"