How to Use React HashRouter For Smooth Routing

Routing is a cornerstone of modern web apps. It allows single-page apps to navigate between views without a full page reload. React Router is one of the most popular libraries for client-side routing and has several ways to manage routing. Among them, React HashRouter is the go-to choice when server config is limited or when supporting legacy browsers.

This blog will dive deep into React HashRouter, its mechanics, pros and cons, and how it differs from Browser Router. We will also cover best practices for route path, dynamic routing, and keeping the current URL in sync with the app state.

What is React HashRouter?

Understanding Routing in React Applications

Before diving into React HashRouter, it is crucial to understand how routing works in React applications. In a single-page application, navigation between pages happens without reloading the entire web application. Instead, React Router Dom updates the react component associated with the current route, ensuring a smooth user experience.

How HashRouter Works

React HashRouter differs from Browser Router in how it manages the URL hash. It uses the hash portion of the URL (everything after #) to track the current route. This allows navigation without requiring changes to the server configuration.

Mermaid Diagram - HashRouter vs. Browser Router

In Browser Router, the route path is a clean URL like /about. However, in React HashRouter, the URL's hash portion is used, resulting in URLs like /#/about.

Key Differences Between HashRouter and Browser Router

Feature	HashRouter	Browser Router
Uses URL hash	✅ Yes (/#/route-path)	❌ No (uses clean URLs)
Requires server configuration	❌ No	✅ Yes
Supports non-browser environments	✅ Yes	❌ No
Works with server-side routing	❌ No	✅ Yes
Good for legacy browsers	✅ Yes	❌ No
SEO Friendly	❌ No	✅ Yes

If server-side rendering or search engine compatibility is required, Browser Router is a better choice. However, for non-browser environments, such as React Native or Electron apps, React HashRouter is a reliable option.

Setting Up React HashRouter in a React Application

To get started with React HashRouter, install react-router and react-router-dom:

1npm install react-router-dom

​

Basic Example of HashRouter

The following code demonstrates how to set up React HashRouter in a React application:

1import React from "react";
2import { HashRouter as Router, Route, Routes, Link } from "react-router-dom";
3
4function Home() {
5  return <h2>Home Page</h2>;
6}
7
8function About() {
9  return <h2>About Page</h2>;
10}
11
12function App() {
13  return (
14    <Router>
15      <nav>
16        <Link to="/">Home</Link>
17        <Link to="/about">About</Link>
18      </nav>
19      <Routes>
20        <Route path="/" element={<Home />} />
21        <Route path="/about" element={<About />} />
22      </Routes>
23    </Router>
24  );
25}
26
27export default App;

​

Explanation

• The React component <HashRouter> wraps the entire application, ensuring that route changes sync with the URL hash.

• <Link> is used for navigation instead of traditional <a> tags to prevent full-page reloads.

• <Routes> and <Route> define the route path and which React components should render.

Advantages of Using HashRouter

1. Works Without Server Configuration: Unlike Browser Router, which relies on the HTML5 history API, React HashRouter does not require additional server configuration. The URL's hash portion ensures the route path is managed purely on the client side.

2. Supports Non-Browser Environments: React HashRouter is beneficial in non-browser environments, such as React Native, Electron apps, and mobile apps, where traditional browser history is unavailable.

3. Works in Legacy Browsers: If your React application needs to support legacy browsers, React HashRouter is the best choice since it does not rely on the HTML5 history API.

4. No Need for Server-Side Routing: In cases where the web server does not support server-side routing, React HashRouter ensures that navigation remains functional within the React application without requiring updates to the node server.

Handling Dynamic Routing with HashRouter

Dynamic URLs with Route Parameters

To handle dynamic URLs, use the useParams hook from react-router-dom:

1import React from "react";
2import { HashRouter as Router, Route, Routes, Link, useParams } from "react-router-dom";
3
4function UserProfile() {
5  let { username } = useParams();
6  return <h2>Profile of {username}</h2>;
7}
8
9function App() {
10  return (
11    <Router>
12      <nav>
13        <Link to="/user/johndoe">John Doe</Link>
14        <Link to="/user/janedoe">Jane Doe</Link>
15      </nav>
16      <Routes>
17        <Route path="/user/:username" element={<UserProfile />} />
18      </Routes>
19    </Router>
20  );
21}
22
23export default App;

​

Syncing with the URL

React HashRouter ensures that the current URL updates in real-time, maintaining sync with the URL even when using dynamic URLs.

Limitations of React HashRouter

1. Not SEO-Friendly – Since search engines may not index the URL hash, it is not ideal for public-facing web applications.

2. Less Readable URLs – URL hash adds unnecessary characters, preventing clean URLs.

3. Lack of Server-Side Support – Cannot be used for server-side rendering or server-side routing.

Wrapping Up

React HashRouter works great for routing in apps, especially when you don’t need clean URLs or server-side support. It’s a good choice for internal apps or projects running in React Native and Electron where a traditional web server isn’t available.

When deciding between HashRouter and BrowserRouter think about the type of routing your app needs. If clean URLs and search engine indexing matter then BrowserRouter might be better. But for simple routing with no server support, React HashRouter does the trick.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.