React Router

What is React Router

In Single Page applications, we have multiple views. We need to navigate to different views without refreshing the whole web page for this we use a Routing library such as React Router.

React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces.

In this blog, we will learn React Routing with hands-on Coding

Prerequisite:- Basic React understanding

Getting Started

Start by creating a new React app.

Install react-router npm install react-router-dom@6

here is the code sandbox link to getStarted

Adding BrowserRouter

We will make a Routing for E-commerce Website

To get started we need to wrap all the routes for that we import BrowserRouter

import { BrowserRouter } from 'react-router-dom';

It is recommended to import and use it at the top level component in a React app’s component hierarchy

we will be wrapping our App.js file in BrowserRouter


import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Here is the CodeSandbox Link here

Creating Different Components

In E-commerce, we have different pages such as Products Page, Cart, Wishlist, Home Signup, and log in, we will create Basic Components for these Pages.

Some of these Pages will be Private and Some of them will be Public.

Here Cart, Wishlist, and UserProfile will be private Pages, and log in, Signup, Products, and Home will be Public Pages.

The next thing we have to do is provide Routes to all these Components For this, We import Routes from react-router

import {Routes,Route} from "react-router-dom

and create routes for the Components

import "./styles.css";
import { Routes, Route } from "react-router-dom";
import {
  Cart,
  Home,
  Login,
  Singup,
  UserProfile,
  Wishilist,
  Products
} from "./Screens";

export default function App() {
  return (
    <div className="App">
      <h1>Simple React Router Guide</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/login" element={<Login />} />
        <Route path="/singup" element={<Singup />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/wishlist" element={<Wishilist />} />
        <Route path="/userProfile" element={<UserProfile />} />
      </Routes>
    </div>
  );
}

here we are Wrapping all our Route into Routes and providing the path and element to each specific route

here is the CodeSandbox link.

To navigate at a particular route within the React app, or the two currently existing routes in the demo app, let’s add a minimal navigation bar with the help of the Link component from react-router-dom.


import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import {
  Cart,
  Home,
  Login,
  Signup,
  UserProfile,
  Wishlist,
  Products
} from "./Screens";

export default function App() {
  return (
    <div className="App">
      <h1>Simple React Router Guide</h1>
      <nav style={{ margin: 10 }}>
        <Link to="/" style={{ padding: 5 }}>
          Home
        </Link>
        <Link to="/products" style={{ padding: 5 }}>
          Products
        </Link>
        <Link to="/userProfile" style={{ padding: 5 }}>
          Profile
        </Link>
        <Link to="/wishlist" style={{ padding: 5 }}>
          Wishilist
        </Link>
        <Link to="/cart" style={{ padding: 5 }}>
          Cart
        </Link>
        <Link to="/login" style={{ padding: 5 }}>
          Login
        </Link>
        <Link to="/signup" style={{ padding: 5 }}>
          Signup
        </Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/wishlist" element={<Wishlist />} />
        <Route path="/userProfile" element={<UserProfile />} />
      </Routes>
    </div>
  );
}

CodesandBox link : here

The concept of navigating between different web pages in HTML is to use an anchor tag:

<a href="">Some Link Name</a> Using this approach in a React app is going to lead to refreshing a web page, each time a new view or page itself is rendered. This is not the advantage you are looking for when using a library like React. To avoid refreshing the web pages, the react-router-dom library provides the Link component.

Adding Nested Routes

Here we need two times of routes private and public routes we can separate them using nested routes using Outlet

The outlet allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

Here we will create a Protected Route

import React from "react";
import { Outlet } from "react-router-dom";
import { Navigate} from "react-router-dom";

function ProtectedRoute({ token }) {
  return token ? (
    <Outlet />
  ) : (
    <Navigate to="/login" />
  );
}

export { ProtectedRoute };

Here we are checking if a user is a login and according to that we are navigating them to either components or login page

We wrap all the routes which we want to be Private into ProtectedRoute

<Route element={<ProtectedRoute token={token} />}>
          <Route path="/cart" element={<Cart />} />
          <Route path="/wishlist" element={<Wishlist />} />
          <Route path="/userProfile" element={<UserProfile />} />
</Route>

here we can't go to the Private route unless we are login

CodeSandBox link : here

here we have done basic routing with the help of reacting routes

there are also many more router functions like useParams, useLocation,useMatch which we will see in further blogs.

here is the Final Implementation of our E-commerce Project here

Conclusion

Hopefully, this blog provides you with a great introduction if you are learning React Router for the first time. If you are already familiar with any of the previous versions of this routing library, I hope this post gives you an overview of the changes between the previous and the latest version.

Simple Guide to React Router

Learn React router with hands-on Coding

Table of contents