How to Implement HashRouter in React

This article provides a straightforward guide on how to implement HashRouter in a React application using react-router-dom. You will learn what HashRouter is, when you should use it instead of BrowserRouter, and how to configure it in your project with a practical code example.

What is HashRouter?

HashRouter is a router component provided by react-router-dom that uses the hash portion of the URL (the part after the # symbol, such as example.com/#/about) to keep your application UI in sync with the URL.

Unlike BrowserRouter, which relies on the HTML5 history API and requires server-side configuration to handle direct page reloads, HashRouter stores the routing state in the hash. Because web servers do not send the hash portion of a URL to the server, this router is ideal for static file hosts (like GitHub Pages) where you cannot configure the server to redirect all requests to index.html.

Step-by-Step Implementation

Step 1: Install React Router DOM

First, ensure you have the react-router-dom package installed in your React project. If you haven’t installed it yet, run the following command in your terminal:

npm install react-router-dom

Step 2: Import HashRouter

Open your main entry file (typically src/main.jsx, src/index.js, or your main App.jsx file) and import HashRouter, Routes, and Route from react-router-dom.

Step 3: Wrap Your Component Tree

Wrap your routing configuration inside the <HashRouter> component. Below is a complete, working example of how to set this up:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter, Routes, Route, Link } from 'react-router-dom';

// Simple page components
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

function App() {
  return (
    <HashRouter>
      <nav style={{ padding: '10px', background: '#f0f0f0' }}>
        <Link to="/" style={{ marginRight: '10px' }}>Home</Link>
        <Link to="/about" style={{ marginRight: '10px' }}>About</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <div style={{ padding: '20px' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </HashRouter>
  );
}

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

How the Code Works

1. The <HashRouter> Container: This component wraps the entire routing system. It listens for changes in the URL hash and renders the appropriate component.
2. Navigation with <Link>: The <Link> component updates the URL hash automatically when clicked. For example, clicking the “About” link changes the browser URL to yourdomain.com/#/about.
3. Route Matching with <Routes> and <Route>: The <Routes> component looks at the current hash path and renders the <Route> element that matches the defined path prop.