React App + GH Pages + Routes & Authorization shows 404 page

I have a react application, which has Routes in it and Authorization module from Firebase. I deployed simple React apps to GH-Pages before successfully. Watch a tutorial on YT and tried to deploy the current app with HashRouter and BrowserRouter - no success.

How to deploy it correctly? GitHub, Google provides no answer that will help me.



"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "predeploy": "npm run build",
    "deploy":"gh-pages -d build"

App.JS where Auth & Routes:

import { HashRouter as Router, Switch, Route } from "react-router-dom"
import { AuthProvider } from "./FireBase/Auth";

/// some imports later 

function App() {
  return (

        <NavBar title='volodymyr' />

          <Route path='/' exact render={(props) => <Main/>} />
          <Route path='/admin' exact component={Admin} />
          <PrivateRoute path='/AdminDashboard'exact component={AdminDashboard} />
          <Route path='/training' component={Training} />
          <Route path='/business' component={Business} />
          <Route path='/research' component={Research} />
          <Route path='/coach' component={Coach}/>
          <Route path='/team' component={Team} />
          <Route path='/symposium' component={GSymp}/>
          <Route path='/blog' component={Blog} />
          <Route path='/winners' component={Winners} />
          <Route path='/hackaton' component={Hackaton} />
        <Footer />


Any help, please? I’m still stuck with that issue and cannot understand how to make it work. Maybe I’m using a wrong approach?