Important O-Week info: Our website is still undergoing major upgrades. Some of the contents here may be out-of-date.

Search

Reinhart Previano K.

Do you love to Ctrl-K, Ctrl-/, or / ? Now you can do three of them (>_ )!

No results so far...

Contact Information

Blog posts from English (#english)


Error 404 when using GitHub when I reload the page

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.

New Year, New Keys: Exciting PGP and Git updates from us, coming 2022.
Cover image for New Year, New Keys: Exciting PGP and Git updates from us, coming 2022.
A better, organized way to accept meetings.
Cover image for A better, organized way to accept meetings.
Beyond the "Limit": Transitioning to Jitsi Meet for future meetings.
Cover image for Beyond the "Limit": Transitioning to Jitsi Meet for future meetings.
Introducing LINE VOOM: Because "Timeline" isn't catchy enough for them...
Cover image for Introducing LINE VOOM: Because "Timeline" isn't catchy enough for them...
oh hey, it's HAM!
Cover image for oh hey, it's HAM!
Site Update: I know you hate tables so yeah...
Cover image for Site Update: I know you hate tables so yeah...
The #KalimantanGate in Apple Maps
Cover image for The #KalimantanGate in Apple Maps
The end and beginning of my avatar.
Cover image for The end and beginning of my avatar.

Reinhart Previano Koentjoro
Reinhart Previano Koentjoro
Citra Manggala Dirgantara
Citra Manggala Dirgantara

A Reinhart company

Products

Company