Different types of routers in react router

Follow me on Twitter, happy to take your suggestions on topics or improvements

In the part 1 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

// 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 ❌

HashRouter

/*
  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.

BrowserRouter

/*
  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 ✅

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

Note: This article was originally written for my blog. I am republishing it here for the amazing DEV community.

Comments

[Sung M. Kim]

Thank you for the post, Paramanantham.

And shouldn't the code sample in BrowserRouter code use BrowserRouter instead of HashRouter in the sample?

[Paramanantham Harrison]

Thanks Sung. I updated the article.

[Sung M. Kim]

Thank you 🙂