React-Router-Dom v6: Choosing the Right Router

In this blog we will get to know about the different types of router along with the most used Router i.e. Browser Router. The other types of router are Memory Router and the Hash Router.

react-router-dom v6

As usual lets start from some introduction. Introduction about router in context to React-Router-Dom library ?

What is Router and its use?

A Router is a component that helps manage the navigation and rendering of different components based on the URL in a single-page application.

It allows you to define and handle routes within your application, ensuring that the appropriate components are displayed when a specific URL is accessed.

The primary router component of the react-router-dom library is the BrowserRouter. The BrowserRouter component is suggested by the react-router-dom team to be used whenever you want to set up client-side routing in your react app.

There are other router Components also available to be used but for some special cases.

Lets get to know about different types of Router.

1. BrowserRouter
   — BrowserRouter is a type of router that uses the HTML5 History API (pushState, replaceState, and the popstate event) to keep our UI in sync with the URL in the browser's address bar.
   — It is the parent component that is used to store all of the other components.
   — It allows you to define routes as children's and associate specific components with those routes, so that when the user navigates to a particular URL, the associated component is rendered without causing a full page reload.
   — It routes as a normal URL in the browser and assumes that the server is handling all the request URL (eg., /, /about) and points to root index.html.
   — I found an issue when I hosted my React App that was using the BrowserRouter as a Static Site it started giving me 404 page not found error when I try to access the custom URL such as /login without going through the root route i.e / .
   — This happened because the BrowserRouter assumes that the server is handling the routes and as the static site do not have any backend server to handle the route it gave me the error.
   Use Cases —
   1. Creating Multi-Page SPAs
   2. Navigation
   3. Nested Routing.
   4. Dynamic Routing.

//App.jsx

import "./App.css";
// Importing the React Router Dom
import { BrowserRouter as Router,Routes,Route, NavLink } from "react-router-dom";
import Home from "./Components/Home";
import About from "./Components/About";
import Contact from "./Components/Contact";
import Error from "./Components/Error";
import Profile from "./Components/Profile";

function App() {
  const navigationActive = (({isActive})=>{
    return {
      color:isActive?'white':'black',
      textDecoration: 'none'
    }
  })
  return (
    <Router>
      {/* Creating the Navigation Link to go from one route to another using the NavLink  */}
      <nav>
        <NavLink style={navigationActive} to="home">Home</NavLink>
        <NavLink style={navigationActive} to="about">About</NavLink>
        <NavLink style={navigationActive} to="contact">Contact</NavLink>
      </nav>
      <Routes>
        <Route path="/home" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
        <Route path="/profile/:username" element={<Profile/>}/>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </Router>
  );
}

export default App;

2. Memory Router
— Unlike the more commonly used BrowserRouter or HashRouter, which rely on the browser’s URL to determine the route, MemoryRouter stores routing information in memory.
— This can be useful in scenarios where you want to manage routes and navigation within your application, but you don’t want to modify the actual browser URL.
— As we are storing the history of the URL in our memory, we are not using the URL to navigate to different pages so this makes our browser back button functionality and front button functionality useless.

Use Cases —

1. Unit Testing
2. Isolated Component Testing
3. Storybook
4. Demo Pages

//App.jsx
import "./App.css";
// Importing the React Router Dom
import { MemoryRouter as Router,Routes,Route, NavLink } from "react-router-dom";
import Home from "./Components/Home";
import About from "./Components/About";
import Contact from "./Components/Contact";
import Error from "./Components/Error";
import Profile from "./Components/Profile";

function App() {
  const navigationActive = (({isActive})=>{
    return {
      color:isActive?'white':'black',
      textDecoration: 'none'
    }
  })
  return (
    <Router>
      {/* Creating the Navigation Link to go from one route to another using the NavLink  */}
      <nav>
        <NavLink style={navigationActive} to="home">Home</NavLink>
        <NavLink style={navigationActive} to="about">About</NavLink>
        <NavLink style={navigationActive} to="contact">Contact</NavLink>
      </nav>
      <Routes>
        <Route path="/home" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
        <Route path="/profile/:username" element={<Profile/>}/>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </Router>
  );
}

export default App;

3. Hash Router
— A HashRouter uses the hash portion of the URL (the part after the # symbol) to manage the application’s routes.
— This is often used when server-side configuration isn’t available or when you want to ensure that your React application can be deployed to a wide range of hosting environments without needing specific server configurations.
— The URL will look like this when we are using the Hash Router
http://example.com/#/ (for the root route)
http://example.com/#/about (for the about route)
— The use of this router is not recommended by the react-router-dom library documentation.

Use Cases —

1. Single Page Application
2. Bookmarkable URL
3. Back and Forward Navigation
4.Deep Linking

//App.jsx
import "./App.css";
// Importing the React Router Dom
import { HashRouter as Router,Routes,Route, NavLink } from "react-router-dom";
import Home from "./Components/Home";
import About from "./Components/About";
import Contact from "./Components/Contact";
import Error from "./Components/Error";
import Profile from "./Components/Profile";

function App() {
  const navigationActive = (({isActive})=>{
    return {
      color:isActive?'white':'black',
      textDecoration: 'none'
    }
  })
  return (
    <Router>
      {/* Creating the Navigation Link to go from one route to another using the NavLink  */}
      <nav>
        <NavLink style={navigationActive} to="home">Home</NavLink>
        <NavLink style={navigationActive} to="about">About</NavLink>
        <NavLink style={navigationActive} to="contact">Contact</NavLink>
      </nav>
      <Routes>
        <Route path="/home" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
        <Route path="/profile/:username" element={<Profile/>}/>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </Router>
  );
}

export default App;

Conclusion

In this blog we got to know what is Router? its type and where we can use different Router?

The Blog also contains Example that you can go through and can also try it yourself but you need to add some more file such as the Home, About, Contact.

And in the next blog we will go more deeper to explore more features provided by the react-router-dom. I hope you are ready for that.

And if you like what I am sharing do tag along with me in the journey to learn new things I would love to share what I am able to learn and explore. And it would be my pleasure to help the community.

Here are some of my writings.

Routing Made Easy: Exploring React-router-dom in React Development

Creating Line Charts Using D3.js Module and React

JWT Authentication in the Frontend: Enhancing Security in Web Applications