Different types of routers in react router
Tags: react, javascript, webdev, beginners
Published: 2019-04-12 06:05:35

---
title: Different types of routers in react router
published: true
description: MemoryRouter vs HashRouter vs BrowserRouter
tags: ['react', 'javascript', 'webdev', 'beginners']
series: Deep dive into react router
canonical_url: https://learnwithparam.com/blog/different-types-of-router-in-react-router/
---

> Follow me on [Twitter](https://twitter.com/learnwithparam), happy to take your suggestions on topics or improvements

In the [part 1](https://dev.to/paramharrison/basic-routing-in-react-using-react-router-406e) of the series, we discussed basic routing. We have used `BrowserRouter` as our router.

There are few more different types of router in react router. Here we will see when to use those routers.

## MemoryRouter

```jsx
// https://example.com (same url for all routes)
import { MemoryRouter as Router } from 'react-router-dom';
```

- A router which doesn't change the URL in your browser instead it keeps the URL changes in memory
- It is very useful for testing and non browser environments ✅
- But in browser, It doesn't have history. So you can't go back or forward using browser history ❌

{% codesandbox wnq10opj68 %}

## HashRouter

```jsx
/*
  Hashed routes, you can go in history.
  https://example.com/#/
  https://example.com/#/about
*/
import { HashRouter as Router } from 'react-router-dom';
```

- A router which uses client side hash routing.
- Whenever, there is a new route get rendered, it updated the browser URL with hash routes. (eg., `/#/about`)
- Hash portion of the URL won't be handled by server, server will always send the `index.html` for every request and ignore hash value. Hash value will be handled by react router.
- It is used to support legacy browsers which usually doesn't support HTML pushState API ✅
- It doesn't need any configuration in server to handle routes ✅
- This route isn't recommended by the team who created react router package. Use it only if you need to support legacy browsers or don't have server logic to handle the client side routes ❌

In their own words,

> As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with `BrowserHistory` instead.

{% codesandbox yq6onnlj4v %}

## BrowserRouter

```jsx
/*
  You can go in history
  https://example.com/
  https://example.com/about
*/
import { BrowserRouter as Router } from 'react-router-dom';
```

- The widely popular router and a router for modern browsers which user HTML5 pushState API. (i.e., `pushState`, `replaceState` and `popState` API).
- It routes as normal URL in browser, you can't differentiate whether it is server rendered page or client rendered page through the URL.
- It assumes, your server handles all the request URL (eg., `/`, `/about`) and points to root `index.html`. From there, BrowserRouter take care of routing the relevant page.
- It accepts `forceRefresh` props to support legacy browsers which doesn't support HTML5 pushState API ✅

{% codesandbox 9j8l8325qy %}

Hope these examples and post helps to understand the basics of different types of routing in react router. Next we will move on to more advanced features in react router 🤗

You can checkout the codebase for this series [here](https://github.com/learnwithparam/react-router-series)

> Note: This article was originally written for [my blog](https://learnwithparam.com/blog/different-types-of-router-in-react-router/). I am republishing it here for the amazing DEV community.