title: I get a 404 error when reloading React Router app
body: <p>When I reload my app on a local server, everything is fine. But when I reload the page while hosting on gh-pages, I get a 404 error. It doesn't do this on the home page, but it does on the other 2 pages. Does it have something to do with the fact that it is being hosted remotely? I'm a bit of a noob with React Router. Any help would be appreciated.Here is the relevant code and the link to my app below:</p>
  
  <p><a href="https://envincebal.github.io/react-game-search/" rel="nofollow noreferrer">React Game App</a></p>
  
  <pre><code>import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Nav /&gt;
            &lt;div className="container"&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/react-game-search" component={MainPage} /&gt;
                &lt;Route path="/games" component={GameSearch} /&gt;
                &lt;Route  path="/about" component={About} /&gt;}
                &lt;Route  path="/details" component={GamesDetails} /&gt;}
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  const Nav = () =&gt; {
    return (
      &lt;div className="navbar"&gt;
        &lt;div className="navbar-item"&gt;
          &lt;NavLink
            exact to="/react-game-search/"
            activeClassName="selected"
            className="nav-link"
          &gt;Home&lt;/NavLink&gt;
        &lt;/div&gt;
        &lt;div className="navbar-item"&gt;
          &lt;NavLink
             to="/games"
            activeClassName="selected"
            className="nav-link"
          &gt;Games&lt;/NavLink&gt;
        &lt;/div&gt;
        &lt;div className="navbar-item"&gt;
          &lt;NavLink
             to="/about"
            activeClassName="selected"
            className="nav-link"
          &gt;About&lt;/NavLink&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  class Game extends Component {
  
    addDefaultSrc = (ev) =&gt; {
      ev.target.src = errorIcon;
    }
  
    render() {
      const { icon, gameTitle, game } = this.props;
      return (
        &lt;div className="game-box"&gt;
          &lt;Link
            style={{ textDecoration: 'none' }}
            to={{
              pathname: "/details",
              state: { game }
            }}&gt;
            &lt;div className="game-content"&gt;
              &lt;img className="game-icon" onError={this.addDefaultSrc} src={icon} alt="icon" /&gt;
  
              &lt;p className="game-link"&gt;&lt;strong&gt;{gameTitle}&lt;/strong&gt;&lt;/p&gt;
  
            &lt;/div&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>