使用gh页中部署的react-router刷新404

Question

当我在gh-pages上部署我的应用程序时，我在路线上刷新页面时始终收到404错误。唯一不会出错的时间是在根（'/'）路由上刷新时。关于解决此问题有什么建议吗？

以下是相关代码，并链接到我的存储库和已部署的应用程序：

REPO：：https://github.com/envincebal/react-game-search
演示 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>
  );
}