React Router not working with Github Pages

Question

My previous website only shows the home page when the home tab is clicked, then if you click my navbar brand, it says 404. This website worked on a create-react-app with npm start, but it doesn't work here, nor on the build. I don't know what is wrong with the app, maybe the router setup is messed up, I don't know. I have linked the App and Index pages where I have the router setup. If you need any more information, just ask me for more information.

Index

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import './styles/index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

App

import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Home from "./routes/Home";
import Project from "./routes/Project";

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/project" element={<Project />}></Route>
        <Route path="/contact" element={<Contact />}></Route>
      </Routes>
    </>
  );
};

export default App;

Answer 1

1. If deploying to GitHub, ensure there is a "homepage" entry in package.json for where you are hosting it in Github.

   Examples:

   User Page

   "homepage": "https://amodhakal.github.io",
   

   Project Page

   "homepage": "https://amodhakal.github.io/portfolio",
   

   Custom Domain Page

   "homepage": "https://amodhakal.com",
   

   Vite: add the project directory as the base.

   vite.config.js

   export default {
     ...
     base: "/portfolio"
   };
   

2. Switch to the HashRouter since GitHub pages doesn't support the tech used by the BrowserRouter.

   index

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { HashRouter } from 'react-router-dom'; // Note 1
   import App from './App';
   import './styles/index.css';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <HashRouter>
         <App />
       </HashRouter>
     </React.StrictMode>
   );
   

   react-router data routers

   import ReactDOM from 'react-dom/client';
   import App from './App';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
   

   import {
     createHashRouter,
     RouterProvider
   } from 'react-router-dom'; // Note 1
   // import routed components
   
   const router = createHashRouter([
     ... routes configuration
   ]);
   
   const App = () => {
     ...
   
     return <RouterProvider router={router} />;
   };
   
   export default App;
   

For more details see the create-react-app docs for deploying to GitHub Pages and notes on client-side routing.

_{¹If using React-Router 7 library, all exports are from react-router instead of react-router-dom. Follow the RR7 installation and setup.}

Answer 2

I faced this similar routing problem in ReactJs when I used gh-pages.

My Problem: Routes are working fine at my local system but when I deployed my web app using gh-pages, I wasn't able to go to the sub-pages directly.

Example: ayushjaink8.github.io/cfhelper was working, and I am able to go to other pages from within the web app. But when I enter ayushjaink8.github.io/cfhelper/dashboard in the URL, it shows the github 404 error page.

Solution: I resolved the above problem by using <HashRouter/> and adding the homepage tag in the package.json like homepage: "/<repository-name>/#".

Note that gh-pages also follows the # rule in its URL routing. So it won't show any 404 error page if you write ayushjaink8.github.io/cfhelper/#/<any-route-of-your-app>.

Everything else remains the same in my codebase. I did not use the useHistory(), <BrowserRouter /> or any other functions. Only using <HashRouter/> works most of the time.

Your homepage becomes /<repo-name>/# instead of /<repo-name>. That's the only thing that change when you use <HashRouter/>.

For example, previously the homepage is: https://ayushjaink8.github.io/cfhelper/ with <HashRouter/>, the URL now becomes: https://ayushjaink8.github.io/cfhelper/#

This also applies to the routes.

Here goes my sample code:

import { Routes, Route, HashRouter } from "react-router-dom";

<HashRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/auth/login" element={<Login />} />
        <Route path="/auth/signup" element={<Signup />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/contests/create" element={<CreateContest />} />
        <Route exact path="/contests/join" element={<JoinContest />} />
        <Route path="/contests/live" element={<LiveContest />} />
        <Route path="/practice" element={ <Practice /> } />
        <Route path="/analyze" element={ <Analyze /> } />
        <Route path="/verify" element={<VerifyEmail />} />
        <Route path="/profile/edit" element={<EditProfile />} />
      </Routes>
      <Footer />
</HashRouter>

Package.json Sample Code:

{
  "name": "cfhelper",
  "homepage": "/<your-github-repo-name>/#",
  "version": "1.0.0",
  "private": true,
}