Hosting React App on Fire base having problem with routing

Question

I just start learning for a month. I built a react Application which is host on Firebase and using cloud function for API and Firestore for DB. The problem I encounter is when I published my react app, when I tried to navigate through my application by manually typing URL, the URL will return 404 and If I refresh the page in one of sub-page, it returns 404 as well. The routing only worked If I navigate from the index page.

I have done some research, most of suggestions would be creating server side routing. It is possible to achieve my goal without using SSR?Is it because the routing config I did or I didnt do to cause this? FYI, it works when It run locally. My routing is a little bit rubbish since I didnt design it really well.

App.jsx

function App() {
    return (
        <div className="App">
            <Switch>
                <Route path="/invitation" exact component={Home} />
                <Route path="/" component={DashBoard} />
            </Switch>
        </div>
    );
}

inside the Dashboard component, I have sub routes.

 render() {
  return (
        <div className="container">
            <div className="mask" />
            <NavBar user={this.state.user} logOut={this.logOut} />
            <div className="container-body">
                <Switch>
                    <Route
                        path="/schedule"
                        exact
                        component={Schedule}
                        user={this.state.user}
                    />
                    <Route
                        path="/betting"
                        exact
                        component={Betting}
                        props={this.state}
                    />
                    <Route path="/login" exact component={Login} props={this.state} />
                    <Route
                        path="/register"
                        exact
                        component={Register}
                        props={this.state}
                    />
                    <Route path="/teams" exact component={Teams} props={this.state} />
                    <Route path="/addteam" component={AddTeam} props={this.state} />
                    <Route path="/teams/:id" component={TeamPage} props={this.state} 
                    />
                    <Route
                        path="/administrator"
                        component={Administrator}
                        props={this.state}
                    />
                    <Route
                        path="/unauthorized"
                        exact
                        component={Page403}
                        props={this.state}
                    />
                    <Route
                        path="/notfound"
                        exact
                        component={Page404}
                        props={this.state}
                    />
                </Switch>
            </div>
        </div>
  );
}

firebase.json

{
 "functions": {
   "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
   "source": "functions"
 },
"hosting": {
"public": "built",
"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
]
 }
}

So this is basically What I have done with routing. I didn't do any more for the routing config. Is it anything wrong with my routing setup? and also How can I fix the route problem with returning 404 page after published.

Answer 1

You need to wrap your Routes in router like this.

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

<Router> // this is required
        <Switch>
          <Route exact path="/login" component={Login} />
          <Route exact path="/" component={Home} />
          <Redirect to="/" />
        </Switch>
</Router> // this is required

Answer 2

This is how your firebase.json should look like, this way all routes will be redirected to your React app ìndex.html and from there you control routing with your app router.

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

Offical Firebase documentation on rewrites: https://firebase.google.com/docs/hosting/full-config#rewrites