Using Hashrouter With React - Definitive Guide

Routing is an important aspect of any React application. When I structure the routes in my project, I'm paying a lot of attention and I try to keep them very well-organized.

When it comes to routing in React, react-router seems to be the most popular choice. Me personally, I'm using it in almost all of my projects.

React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native. (source: React Router)

The interesting part is that this library comes with two available router types.

Two router types in React are:

• BrowserRouter
• HashRouter

In this article, we'll focus on the second one. You'll learn what the HashRouter is, when to use it. And in addition, you'll learn what's the difference between HashRouter and BrowserRouter.

What Is Hash Router in React

The # part of the URL is not a new thing. We've seen websites using it for a long time.

Typical use of # in modern websites is to scroll down to a specific section of an article.

While showing a specific part of a page based on the hash is a valid use case, it doesn't have to end there.

The hash portion of the URL can be used to display completely different pages. This technique can also be called routing. And it's the basic building block of HashRouter.

When using hash routing, the hash portion of the URL is never sent to a server. This means that changing URLs and navigating between pages won't make any server request.

This is why hash routing doesn't require any server configuration. And it makes it a great candidate for single-page applications.

Using Hash Router in React

Now that we know the role of # in the URL. We can start looking at the React HashRouter and its applications.

A Router that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL. (source: React Router)

Let's consider a simple website that consists of 2 pages.

• app.example.com/#/ - Dashboard
• app.example.com/#/profile - Profile

To implement this website using a HashRouter, we'll do the following.

Install dependencies first.

Installing dependencies

npm install --save react-router-dom
# or
yarn add react-router-dom

After that, we need to set up the routing structure.

App.jsx

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

import Dashboard from './Pages/Dashboard';
import Profile from './Pages/Profile';
 
 const App = () => (
  <HashRouter>
    <Route
      exact
      path='/'
      component={Dashboard}
    />
    <Route
      exact
      path='/profile'
      component={Profile}
    />
  </HashRouter>
)

export default App

As you can see, it's very simple to add HashRouter to React app. And it's not that much different from the usage of BrowserRouter. The only difference is the way they work under the hood.

Browser Router vs Hash Router

Now that we know how HashRouter works in React, let's compare it to BrowserRouter.

Browser Router

A Browser router is an alternative to hash routing, which uses History API to handle URLs in your React app.

By using browser API, we can completely change the URL, without the need to reload the whole page and make a request to a server.

A Router that uses the HTML5 history API (pushState, replaceState and popstate event) to keep your UI in sync with the URL. (source: React Router)

Pros of Browser Router

• User-friendly URLs
• It uses a powerful History API

Cons of Browser Router

• Needs additional server configuration
• Client routing can clash with server routing
• Missing support for legacy browsers

Hash Router

We already talked a lot about the hash router and its usage. Now, let's list its advantages and disadvantages.

Pros of Hash Router

• Full browser support
• No server configuration is required
• Easy to embed to another website

Const of Hash Router

• Weird-looking URLs

When to Use Hash Router

In the previous sections, we learned what hash routing is and what are its pros and cons. With all that information in mind, we can make a list of good use cases for hash routing.

Good applications for the React HashRouter are:

• Simple SPA that doesn't require a server.
• SPA that needs to support legacy browsers.
• SPA that needs to be embedded into another website.

Concluding Thoughts

Routing is the process of moving from one page to another. To make this move, we need to change the URL in the browser. When the change is made, the routing mechanism will determine what page should be displayed.

This all process can be handled by a react-router. When using this library, we have the option to choose between BrowserRouter and HashRouter.

In this article, we focused on the HashRouter.

You learned how HashRouter works and when should you use it in your project. We also quickly discussed the difference between BrowserRouter and HashRouter.

With all the information you learned, you can determine what type of routing is ideal for your React application. And hence, what type of router you should pick.