Error 404 when using GitHub when I reload the page

Error 404 when using GITHUB when I reload the page by Andrea Lopez Bravo (Stack Overflow)

I am making an E-commerce website with react and I upload the website to Github pages the deployment works ok, but when I click the Nav buttons to go to different parts of the webpage and reload th…

This question was originally asked on StackOverflow. View original question

I am making an E-commerce website with react and I upload the website to Github pages the deployment works ok, but when I click the Nav buttons to go to different parts of the webpage and reload the page, an error 404 appears:

Failed to load resource: the server responded with a status of 404 ()

In the local host it works totally fine. Should I need to deploy my website as a new project again? I have always upload the websites the same way and I did not have this problem. I actualized my google browser, can there can be a compatibility problem? Thanks a lot!

Note: I assume that you are using create-react-app with JSX and react-router-dom like this:

<BrowserRouter>
  <Routes>
    <Route exact path="/" element={<HomePage />} />
    <Route path="cart" element={<CartPage />} />
    <Route path="settings" element={<SettingsPage />} />
  </Routes>
</BrowserRouter>

Well, HTTP routing in GitHub Pages works differently than using the npm start command in your local machine. And fortunately, the developers behind create-react-app have already explained the technical reasons behind this:

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.

This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html.

And yes, GitHub Pages also counts as a static file server, and expects that those routes are available as individual static files (e.g. build/cart.html for the /cartroute), and the goal here is to trick GitHub Pages to serve index.html instead for all of these routes. However, it is currently notpossible to fix this issue on the GitHub Pages’ side, e.g. by applying the .htaccessconfiguration file (since GitHub Pages doesn’t use Apache Web Server) or going to the repository settings on GitHub.

So, what can be done here? The above code snippet uses <BrowserRouter>, which is known to be incompatible for hosting with GitHub Pages. And good news, many recommend to replace the <BrowserRouter> into <HashRouter>,which should work in practically all static file servers (see technical reasons here). There’s a dedicated FreeCodeCamp article on how to set up <HashRouter> for your React project and publishing it into GitHub Pages.

Note: Once you have replaced it with <HashRouter>, you will need to take care of existing hardcoded paths in HTML/JSX tags as <HashRouter> uses good-old HTML anchor/ID tags (e.g. #menu). That means <a href="/cart"> in your React app must be replaced with <a href="#/cart"> (Note the additional hash/# character there) or else it will again return a 404.