CODEWITHSUNDEEP
reactjsreact-router
envincebal
envincebal

Reputation: 205

I get a 404 error when reloading React Router app

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:

React Game App

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

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Nav />
          <div className="container">
            <Switch>
              <Route exact path="/react-game-search" component={MainPage} />
              <Route path="/games" component={GameSearch} />
              <Route  path="/about" component={About} />}
              <Route  path="/details" component={GamesDetails} />}
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

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

class Game extends Component {

  addDefaultSrc = (ev) => {
    ev.target.src = errorIcon;
  }

  render() {
    const { icon, gameTitle, game } = this.props;
    return (
      <div className="game-box">
        <Link
          style={{ textDecoration: 'none' }}
          to={{
            pathname: "/details",
            state: { game }
          }}>
          <div className="game-content">
            <img className="game-icon" onError={this.addDefaultSrc} src={icon} alt="icon" />

            <p className="game-link"><strong>{gameTitle}</strong></p>

          </div>
        </Link>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.getElementById('root'));

Upvotes: 3

Views: 14965

Answers (1)

Maxim Mazurok
Maxim Mazurok

Reputation: 4162

That's because when you reload the page, it tries to access /games page for example. But on the github pages, there is only / or /index.html page. So, you're getting 404 error.

You might find this answer helpful: https://github.com/facebook/create-react-app/issues/1765#issuecomment-285114194

From there:

Two solutions:

Don’t use HTML5 history on GitHub pages. Use hashHistory instead. Your URLs will look like https://rockchalkwushock.github.io/rcws-development/#path/inside/the/app.

Use process.env.PUBLIC_URL in your route definitions so that they work both in development and after deployment. For example: . This will be empty in development and rcws-development (inferred from homepage) in production.

I would recommend switching to hash navigation policy, so your routes will look like blabla.com/#game instead of blabla.com/game. It will route all requests to your index.html, so you can handle routing using React.

You can read more about using HashRouter in React here: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

Upvotes: 6

Related Questions