Enhance your react deployment skills with routing!

How to deploy React app with client-side routing on GitHub Pages?

This article explains how to add routing to React app in GitHub Pages.

4 min readJul 19, 2023

React Routing on Github Pages — React + Routing x GitHub

Introduction:

In this article we are going to see how to deploy React applications with client-side routing on GitHub pages. Routing is an important part of website which enhances the user experience.

React Routers are used to make routes in react app. But Github pages doesn’t support normal BrowserRouting. It give an 404 error for it.

We can achieve routing on GitHub pages in 2 ways.

Using HashRouter which allows to switch between pages using hash history.
Using a 404.html file, this approach in explained in detailed in this guide.

We will focus on the first approach which is simple and can be easily done. So let’s begin !

Prerequisites:

This is continuation of my previous article about How to Deploy React on GitHub Pages.

How to Deploy React on GitHub Pages?

medium.com

Before reading further first see the above article to understand the background. It includes the setup of GitHub pages and integration with react application.

Steps:

Step 1: Install React Router

To install react router use the following command.

npm install react-router-dom

GitHub pages doesn’t support BrowserRouter, hence we use HashRouter. You can get more information about this at Official Docs.

Now we will import HashRouter in index.js file.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Step 2: Creating Navbar Component

Create Navbar.js in src folder. This is used to navigate between the pages.

import { Link } from "react-router-dom";
import './App.css';

export default function Navbar() {
    return (
        <div className="App">
            <center>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                </ul>
            </center>
        </div>
    )
}

Step 3: Creating templates

To add routing, we need multiple pages. Create a templates directory and add multiple components in it. Here we will consider Home, About and Contact.

Note: These are just sample components you can use your own components.

Home.js

import logo from '../logo.svg';
import '../App.css';

export default function Home() {
    return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React With Swaraj
        </a>
      </header>
    </div>
    )
}

About.js

export default function About() {
    return (
    <div>
      <h1>
        <center>
        <p>
          This is About.
        </p>
        <a
          href="https://github.com/swarajgosavi/swarajgosavi"
          target="_blank"
          rel="noopener noreferrer"
        >
          About Me.
        </a>
      </center>
      </h1>
    </div>
    )
}

Contact.js

export default function Contact() {
    return (
    <div>
      <h1>
      <center>
        <p>
          Contact Me.
        </p>
        <a
          href="https://github.com/swarajgosavi"
          target="_blank"
          rel="noopener noreferrer"
        >
          Swaraj Gosavi (GitHub) [@swarajgosavi]
        </a>
      </center>
      </h1>
    </div>
    )
}

Step 4: Modify App.js

Modify the code in App.js by adding Navbar and Routes

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

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

export default App;

Step 5: Deployment

Now it's time to deploy our React app with client-side routing to GitHub pages. Run the following command in terminal to push the current changes to GitHub.

git add .
git commit -m "Routing added"
git push

Now use the deploy command to deploy our React app.

npm run deploy

Now let’s visit our site at (change myusername with your github username)

https://myusername.github.io/my-app

Here in my case, it will be.

https://swarajgosavi.github.io/my-app

You can visit it right now by going to the site. Just click on the below link.

React App (swarajgosavi.github.io)

Congratulations you successfully deployed a React app with client-side routing on GitHub Pages!!!

Conclusion:

Creating route in React app.
Deployed the React app with routing to GitHub.

References:

Thank You!