getting 404 on refresh using react-router deployed in gh-pages

Question

when I deploy my app on gh-pages, I keep getting a 404 error when I refresh the page on my routes. The only time it doesn't error out is when refreshing on the root ('/') route. Any advice on solving this issue?

Here's the relevant code below and link to my repo and deployed app:

REPO: https://github.com/envincebal/react-game-search
DEMO https://envincebal.github.io/react-game-search/

class App extends Component {
  render() {
    return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <div className="App">
          <Nav />
          <div className="container">
            <Switch>
              <Route exact path="/" component={MainPage} />
              <Route exact path="/games" component={GameSearch} />
              <Route exact path="/about" component={About} />}
              <Route exact path="/details" component={GamesDetails} />}
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    );
  }
} 

const Nav = () => {
  return (
    <div className="navbar">
      <div className="navbar-item">
        <NavLink
          exact to="/"
          activeClassName="selected"
          className="nav-link"
        >Home</NavLink>
      </div>
      <div className="navbar-item">
        <NavLink
          exact to="/games"
          activeClassName="selected"
          className="nav-link"
        >Games</NavLink>
      </div>
      <div className="navbar-item">
        <NavLink
          exact to="/about"
          activeClassName="selected"
          className="nav-link"
        >About</NavLink>
      </div>
    </div>
  );
}